javascript - 如何使用 enzyme 和 sinon 模拟点击子元素？

Question

我正在使用 enzyme 和 sinon，在尝试使用此测试用例时收到此错误:

Expected value to equal: true Received: false

在控制台中使用 .debug() 我看到:

显然没有调用点击事件处理程序。

我怀疑这个问题可能与 .simulate('click', onLocationClick) 有关。

你能帮我看看我做错了什么吗？谢谢。

 console.log src\forecast\locationFinder\LocationFinder.test.js:28
      <Location country="CZ" id={3067696} name="Prague" onLocationClick={[Function]} />

  it('should click event', () => {
    const data = [
      {
        country: 'CZ',
        id: 3067696,
        name: 'Prague'
      },
      {
        country: 'US',
        id: 4548393,
        name: 'Prague'
      }
    ]
    const onLocationClick = sinon.spy()
    const wrapper = shallow(
      <LocationFinder
        locations={data}
        onLocationClick={onLocationClick}
    />)
    console.log(wrapper.find({ id: 3067696 }).debug())
    wrapper.find({ id: 3067696 }).simulate('click', onLocationClick)
    expect(onLocationClick.called).toEqual(true)
  })

Answer 1

来自官方酵素docs :

• Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set.

• Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

牢记以上两点，您可以尝试以下方法:

<强>1。注册事件

检查是否onLocationClick在 click 注册事件。它是否有另一个事件名称，如 locationclick ？很可能，它根本没有注册为事件，只是一个 prop 函数。

<强>2。底层组件

是否 <Location />用 onClick() 封装另一个组件或元素处理程序定义？如果是，请潜入并.find()该元素通过 wrapper并模拟 click在上面。例如

wrapper.find({ id: 3067696 }).dive().find('li > a').simulate('click');
expect(onLocationClick.called).toEqual(true);

就像@GibboK 所做的那样，您还可以将底层元素存储为常量，并在模拟点击之前检查它是否存在。