Question

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

＆＃13;

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>
  }
}

＆＃13;

测试：

＆＃13;

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()
  })

})

＆＃13;

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

我觉得我90％都在那里。这里有什么问题？谢谢。

Answer 1

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

常见问题

目前，浅渲染器的事件模拟没有   像在真实环境中通常所期望的那样传播。作为一个   必须在具有该实际节点的实际节点上调用.simulate()   事件处理程序集。

即使名称暗示这模拟了一个   实际事件，.simulate()实际上将针对组件的道具   根据您提供的事件。例如，.simulate('click')会   实际上得到onClick道具并调用它。

因此，您可以运行component.find('form').simulate('submit')或component.find('form').prop('onSubmit')()

使用Jest测试React组件的方法

1 个答案: