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

• 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

3 Answers 3

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