How to mock a click event on an element in React using jest , react-testing-library

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 ?

Does casing matter for attributes like this? I've always used data-testid instead of data-testId — Attila
– Attila, Commented Aug 6, 2020 at 15:52

Talmacel Marian Silviu · Accepted Answer · 2020-06-19 20:10:16Z

1

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

answered Jun 19, 2020 at 20:10

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pramod singh Over a year ago

can you provide more specific, since your answer is correct.

Talmacel Marian Silviu Over a year ago

Sorry I am new to answering on stackoverflow. My post shortly answers what the problem of the poster is? AM I supposed to provide more information that the poster need? That is how you simulate clicks with jest, I don't know what else I can add to make it more specific maybe you can enlighten me :D

MrWiLofDoom Over a year ago

This will work if you are using enzyme but not if you are using testing-library, like OP asked

skube · Accepted Answer · 2020-07-27 19:23:36Z

1

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.

answered Jul 27, 2020 at 19:23

skube

6,2559 gold badges58 silver badges82 bronze badges

Comments

Joomler · Accepted Answer · 2023-07-07 14:03:14Z

0

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

edited Jul 7, 2023 at 14:03

Joomler

2,8183 gold badges33 silver badges38 bronze badges

answered Jun 26, 2020 at 15:14

Hieu Dang

4034 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to mock a click event on an element in React using jest , react-testing-library

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related