我有这个 react 的无状态组件
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)
})
})
})
关于javascript - 单元测试无状态组件方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44783216/