我不是单元测试方面的专家,我试图在我的虚拟 todoapp 项目上实现 100% 的覆盖率,这对于像 TodoList 组件这样的简单组件来说很容易,但是 AddTodo 组件呢?
import React, {PropTypes} from 'react'
import {compose, withState, withProps} from 'recompose'
/**
* Form to create new todos.
*/
const enhance = compose(
withState('value', 'setValue', ''),
withProps(({value, setValue, addTodo}) => ({
handleSubmit: e => (
e.preventDefault(),
addTodo(value),
setValue('')
),
handleChange: e => setValue(e.target.value),
}))
)
const Component = ({value, handleSubmit, handleChange}) =>
<form onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={handleChange}
/>
<input type="submit" value="add"/>
</form>
Component.displayName = 'FormNewTodo'
Component.propTypes = {
value: PropTypes.string.isRequired,
handleSubmit: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
}
export default enhance(Component)
这是我当前的 AddTodo 测试:
import React from 'react'
import {shallow} from 'enzyme'
import FormNewTodo from './index'
test('it should render properly', () => {
const wrapper = shallow(<FormNewTodo value="something"/>)
expect(wrapper).toMatchSnapshot()
})
该测试产生以下覆盖率:Stmts 62.5、Branch 100、Funcs 25、Lines 62.5。
未覆盖的线路是:12、16、21。
我应该如何正确测试它们?我错过了什么?有一些关于该主题的资源吗?
我终于解决了我的问题,注意目标是实现 100% 的覆盖率,仅此而已。
这是我的解决方案:
import React from 'react'
import {shallow} from 'enzyme'
import FormNewTodo from './index'
test('<FormNewTodo/>', () => {
const preventDefault = jest.fn()
const addTodo = jest.fn()
const subject = shallow(
<FormNewTodo
addTodo={addTodo}
/>
)
subject.dive()
.find('[type="text"]')
.simulate('change', {target: {value: 'woot'}})
subject.dive()
.simulate('submit', {preventDefault})
expect(preventDefault).toHaveBeenCalled()
expect(addTodo).toHaveBeenCalled()
})