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

Question

My component renders the following

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

And, in my tests I am doing the following

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

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

It runs successfully

But when I try to run, and simulate onClick it fails.

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

I tried mocking the function using jest mock . What did I do wrong?

Answer 1

link.simulate('click') - should to the job!

Answer 2

Generally, you shouldn't worry about testing methods inside your component. Rather, you should test the side effects of those methods.

Of course onAddText will be called (or whatever onAddText references), but what does onAddText actually do? Test that effect.

Answer 3

You can use shallow in jest to resolve your case.

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