My ponent 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 ?

My ponent 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 ?

• javascript
• reactjs
• jestjs
• react-testing-library

Share Improve this question Follow edited Jun 20, 2020 at 8:08 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jun 19, 2020 at 19:26 StrugglingCoderStrugglingCoder 5,0311616 gold badges7272 silver badges110110 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

Generally, you shouldn't worry about testing methods inside your ponent. 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.

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