CODEWITHSUNDEEP
javascriptreactjsjestjsreact-testing-library
StrugglingCoder
StrugglingCoder

Reputation: 5021

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

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.

enter image description here

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 ?

Upvotes: 2

Views: 9207

Answers (3)

Hieu Dang
Hieu Dang

Reputation: 403

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

Upvotes: 0

skube
skube

Reputation: 6175

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.

Upvotes: 1

Talmacel Marian Silviu
Talmacel Marian Silviu

Reputation: 1736

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

Upvotes: 1

Related Questions