使用 Jest 测试 React 组件的方法答案

【问题标题】：Using Jest to test a React component's method使用 Jest 测试 React 组件的方法
【发布时间】：2017-04-25 02:43:52
【问题描述】：

我有一个容器组件，负责为子表单组件方法提供保存功能。我正在尝试使用 Jest & Enzyme（我认为我需要酶？）来测试子组件是否触发从父组件传递的函数。这两种方法看起来像这样：

class Parent extends Component {
  handleSave = (someData) => (
    /* do some ajax with someData */
  )
  render() {
    return(
      <ChildComponent {...this.props} handleSave={this.handleSave} />
    )
  }
}

class ChildComponent extends Component {
  render() {
    <form onSubmit={this.props.handleSave}>
      <button type="submit">Submit</button>
    </form>
  }
}

还有测试：

import React from 'react'
import ParentContainer from '../src/ParentContainer'

describe('<ParentContainer />', () => {

  it('Should fire handle save when PatientScheduler form saves', () => {
    const component = mount( <ParentContainer />)
    component.handleSave = jest.fn()
    component.find('[type="submit"]').simulate('click')
    expect(component.handleSave).toHaveBeenCalled()
  })

})

我收到的失败消息是Expected mock function to have been called.

我觉得我已经完成了 90% 的工作。这里有什么问题？谢谢。

【问题讨论】：

标签： javascript reactjs testing jestjs enzyme

【解决方案1】：

问题是模拟并没有真正触发点击事件，而是运行wrapper.prop('click')()。形成文档：

常见问题

目前，浅渲染器的事件模拟不支持正如人们通常在真实环境中所期望的那样传播。作为一个结果，必须在实际节点上调用.simulate() 事件处理程序集。

即使名称暗示这模拟了实际事件，.simulate() 实际上将针对组件的道具根据你给它的事件。例如，.simulate('click') 将实际获取 onClick 属性并调用它。

所以你可以运行component.find('form').simulate('submit') 或component.find('form').prop('onSubmit')()

【讨论】：

好的，这解决了提交问题（谢谢），但我仍然不确定如何正确地监视我的 handleSave 方法。
你测试有一些缺陷主要是这一行`component.handleSave = jest.fn()`。你不应该测试你的内部行为，而应该测试外部的东西。在您的情况下，我假设您将使用一些导入的模块来执行实际请求。您必须对此进行嘲笑和监视。