Javascript 如何正确测试反应组件？

我不是单元测试方面的专家，我正试图在我的虚拟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)

import React，{PropTypes}来自“React”
从“重新组合”导入{compose，with state，with props}
/**
*表单创建新的TODO。
*/
常数增强=合成(
带状态（'value'，'setValue'，''），
withProps（（{value，setValue，addTodo}）=>({
handleSubmit:e=>(
e、 preventDefault（），
addTodo（值），
设置值（“”）
),
handleChange:e=>setValue（e.target.value），
}))
)
常量组件=（{value，handleSubmit，handleChange}）=>
Component.displayName='FormNewTodo'
Component.propTypes={
值：PropTypes.string.isRequired，
handleSubmit:PropTypes.func.isRequired，
handleChange:PropTypes.func.isRequired，
}
导出默认增强（组件）

这是我当前的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()
})

从“React”导入React
从“酶”导入{shall}
从“./index”导入FormNewTodo
测试（'它应该正确呈现'，（）=>{
常量包装器=浅（）
expect（wrapper.toMatchSnapshot（））
})

该测试提供以下覆盖范围：Stmts 62.5，分支100，Funcs 25，第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()
})

从“React”导入React
从“酶”导入{shall}
从“./index”导入FormNewTodo
测试（“”，（）=>{
const preventDefault=jest.fn（）
const addTodo=jest.fn（）
常量主题=浅(
)
subject.dive（）
.find（“[type=“text”]”）
.simulate（'change'，{target:{value:'woot'}}）
subject.dive（）
.simulate（'submit'，{preventDefault}）
expect（prevent default）.toHaveBeenCalled（）
expect（addTodo）.toHaveBeenCalled（）
})

我不熟悉重新组合，但我假设您未测试的代码是

onChange

和

onSubmit

回调函数，

setValue

和

addTodo

是组件的支柱。要测试这一点，您需要将它们作为间谍传递到组件中，间谍是使用

jest.fn（）

创建的。然后您必须触发

onChange

和

onSubmit

，并在间谍身上测试它们是否被正确的参数调用

test('it submits the form', () => {
  //create the spies for your callbacks
  const setValue = jest.fn()
  const addTodo = jest.fn()

  //pass them to your rendered component
  const wrapper = shallow(
    <FormNewTodo 
      value="something" 
      setValue={setValue} 
      addTodo={addTodo}
    />
  )
  //create a spy for your fake event
  const preventDefault = jest.fn()
  //trigger the submit by just calling the prop
  wrapper.trigger.prop('onSubmit')({preventDefault})
  //check that the functions are called with correct parameter
  expect(preventDefault).toHaveBeenCalled()
  expect(setValue).toHaveBeenCalledWith('')
  expect(addTodo).toHaveBeenCalledWith('something')

})

test（'它提交表单'，（）=>{
//为您的回调创建间谍
const setValue=jest.fn（）
const addTodo=jest.fn（）
//将它们传递给渲染组件
常数包装=浅(
)
//为你的假事件创建一个间谍
const preventDefault=jest.fn（）
//通过调用道具触发提交
wrapper.trigger.prop（'onSubmit'）（{preventDefault}）
//检查是否使用正确的参数调用函数
expect（prevent default）.toHaveBeenCalled（）
expect（setValue）.已通过（“”）调用
expect（addTodo）.toHaveBeenCalledWith（'something'））
})

未调用

handleSubmit

和

handleChange

函数，因此覆盖率报告称未涵盖这些行

因为您已经有了

酶

，所以可以将它用于触发这些处理程序的事件

例如：

wrapper.find('input').simulate('click') // trigger handleChange
wrapper.find('form').simulate('submit') // trigger handleSubmit

---

您可能想查看CreateReact应用程序的用户指南，其中有一节关于测试React组件的内容，请记住在触发/模拟事件时使用mount而不是shall。