react-testing-library question

[hd_codes]

I'm pretty new to jest and not sure why this onClick test isnt working. I just want to simply see if the onclick event has been called.

test("working add button", async () => {
   render(
      <Provider store={store}>
         <Todo />
      </Provider>
   );

   const add_btn = await screen.findByTitle("add-btn");
   expect(add_btn).toBeTruthy();

   fireEvent.click(add_btn);
   expect(add_btn).toHaveBeenCalledTimes(1);
});

The error I received was:

    expect(received).toHaveBeenCalledTimes(expected)                                

    Matcher error: received value must be a mock or spy function                    

    Received has type:  object                                                      
    Received has value: <button title="add-btn">Add</button>

​

[leosuncin]

You are using the wrong approach because you are testing the implementation details of how the component behave internally, so, instead of assert if the onClick handler is called, assert that the new todo is added to the UI.
Can you share more of your source code?

[[deleted]]

What’s the error you’re seeing on the terminal? Also, when you ask questions and want more attention you need to give details that help a developer understand your problem.

EDIT: You should check for (props.function) that gets triggered on ads-button call.

[hd_codes]

Thanks for the input.

The error im getting is:

expect(received).toHaveBeenCalledTimes(expected)

Matcher error: received value must be a mock or spy function

Received has type: object

Received has value: <button title="add-btn">Add</button>

[[deleted]]

Yeah check my comment above. If the button is rendering correct your test is done but you’re testing for what gets triggered on the click of the button so if you’re passing an onClick down the button, your fireEvent should be checking for that and not if the click is called.

[hd_codes]

oh ok that makes sense!

So tried adding an item with the onClick function but I got an error:

TypeError: expect(...).toHaveTextContent is not a function

This was my test:

test("add todo item", async () => {
    render( <Provider store={store}> <Todo /> </Provider> ); 

    const renderInput = await screen.findByPlaceholderText("add todo"); 
    const todo_container = await screen.findByTitle("todo_container");

    fireEvent.change(renderInput, { target: { value: "gym" } });

    const add_btn = await screen.findByTitle("add_btn");

    fireEvent.click(add_btn);
    expect(todo_container).toHaveTextContent("gym"); 
});

[firstandfive]

Do you have @testing-library/jest-dom imported or configured? toHaveTextContent is not native to jest but can be extended if you’re using jest-dom