如何使用 jest、react-testing-library 在 React 中的元素上模拟点击事件答案

【问题标题】：How to mock a click event on an element in React using jest , react-testing-library如何使用 jest、react-testing-library 在 React 中的元素上模拟点击事件
【发布时间】：2020-06-19 19:26:27
【问题描述】：

我的组件呈现以下内容

{list.options && list.options.length > 0 ? (
<div
    data-testId="MyAlertText" onClick={onAddText}>
    Add Text
</div>
) : null}

而且，在我的测试中，我正在执行以下操作

it('Add Text link should render', () => {
    const { container, getByTestId} = render(<MyComp />);

    const link = getByTestId('MyAlertText');
    expect(link).toBeInTheDocument();
})

运行成功

但是当我尝试运行并模拟 onClick 时，它失败了。

it('Add Text link should call method', () => {
    const { container, getByTestId} = render(<MyComp />);

    const link = getByTestId('MyAlertText');
    expect(link).toBeInTheDocument();

    fireEvent.click(link );
    expect(jest.fn()).toHaveBeenCalled();
})

我尝试使用jest mock 模拟该函数。我做错了什么？

【问题讨论】：

这样的属性大小写重要吗？我一直使用data-testid 而不是data-testId

标签： javascript reactjs jestjs react-testing-library

【解决方案1】：

link.simulate('click') - 应该去工作！

【讨论】：

您能否提供更具体的信息，因为您的答案是正确的。
对不起，我是新来回答 stackoverflow 的。我的帖子很快回答了海报的问题是什么？我应该提供海报需要的更多信息吗？这就是你用玩笑模拟点击的方式，我不知道我还能添加什么让它更具体，也许你可以启发我：D
如果您使用酶，这将起作用，但如果您使用测试库，就像 OP 询问的那样，这将不起作用

【解决方案2】：

通常，您不必担心组件内部的测试方法。相反，您应该测试这些方法的副作用。

当然onAddText 将被调用（或任何onAddText 引用），但onAddText 实际上做了什么？测试一下效果。

【讨论】：

【解决方案3】：

您可以在jest 中使用shallow 来解决您的问题。

it('Add Text link should render', async () => {
  const wrapper = shallow(<MyComp />);
  const spy = jest.spyOn(wrapper.instance(), 'onAddText');
  wrapper.find('#MyAlertText).simulate('click');
  await wrapper.update();
  expect(spy).toHaveBeenCalled();
});

【讨论】：