如何使用酶和 sinon 模拟点击子元素？

Question

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

期望值等于： 真的 已收到： 假的

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

显然没有调用 click 的事件处理程序。

我怀疑这个问题可能与 .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：

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

• 尽管名称暗示这模拟了实际事件， .simulate() 实际上将基于组件的 prop 事件你给它。例如，.simulate('click') 实际上会得到 onClick 属性并调用它。

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

1.注册活动

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

2。底层组件

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

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

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