[英]unit test stateless component method
我有这种无状态的反应成分
const Clock = () => {
const formatSeconds = (totalSeconds) => {
const seconds = totalSeconds % 60,
minutes = Math.floor(totalSeconds / 60)
return `${minutes}:${seconds}`
}
return(
<div></div>
)
}
export default Clock
如何测试formatSeconds方法?
我写了这个,测试失败了。
import React from 'react'
import ReactDOM from 'react-dom'
import expect from 'expect'
import TestUtils from 'react-addons-test-utils'
import Clock from '../components/Clock'
describe('Clock', () => {
it('should exist', () => {
expect(Clock).toExist()
})
describe('formatSeconds', () => {
it('should format seconds', () => {
const Clock = TestUtils.renderIntoDocument(<Clock />)
const seconds = 615
const expected = '10:15'
const actual = Clock.formatSeconds(seconds)
expect(actual).toBe(expected)
})
})
})
第一次测试通过但可能在执行Clock.formatSeconds时遇到了一些问题。
组件Clock
是一个函数,在呈现组件时调用该函数。 方法formatSeconds
在Clock
闭包内定义,并且它不是Clock
的属性,因此您无法从外部访问它。
此外,您在每个渲染上重新创建formatSeconds
方法,并且由于该方法实际上并未使用范围中的任何prop,因此它有点浪费。 因此,您可以将该方法取出并导出。 您也可以将其移动到另一个实用程序文件,然后导入它,因为它不是Clock
的组成部分,您可能希望在其他地方重用它。
export const formatSeconds = (totalSeconds) => {
const seconds = totalSeconds % 60,
minutes = Math.floor(totalSeconds / 60)
return `${minutes}:${seconds}`
}
const Clock = () => {
return(
<div></div>
)
}
export default Clock
现在测试也很简单:
import React from 'react'
import ReactDOM from 'react-dom'
import expect from 'expect'
import TestUtils from 'react-addons-test-utils'
import Clock, { formatSeconds } from '../components/Clock' // import formatSeconds as well
describe('Clock', () => {
it('should exist', () => {
expect(Clock).toExist()
})
describe('formatSeconds', () => {
it('should format seconds', () => {
const seconds = 615
const expected = '10:15'
const actual = formatSeconds(seconds) // use it by itself
expect(actual).toBe(expected)
})
})
})
派对有点晚了,但我有两种方法可以跟你分享。 开箱即用,您无法测试私有方法。 无论它是无状态组件还是仅具有一些私有内部的简单功能。 我有一个使用以下方法:
使用公共方法将无状态组件转换为类。 是的,这种打败了目的。 但它仍然是一种选择。
保留无状态组件并将私有方法声明为“静态”。
const Button = onClick => { return <button onClick={Button.handleClick}> My Button </button>; } Button.handleClick = e => e.stopPropagation(); ReactDOM.render(<Button />, document.getElementById('root'));
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.