如何使用jest，react-testing-library模拟React中元素上的click事件

Question

我的组件呈现以下内容

{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模拟该函数。我做错了什么？

Answer 1

link.simulate（'click'）-应该工作！

Answer 2

您可以在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();
});

Answer 3

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

当然会调用onAddText（或任何onAddText引用），但是onAddText的实际作用是什么？测试效果。