javascriptreactjsjestjsreact-testing-libraryreact-test-renderer

How to test react component with onClick function Jest/React testing library


I am trying to get to 100% coverage for my tests in one of them it highlights the onClick function which sets the state for a component: this is the component:

I have a button which has an onClick function as below, the button is mapped in from an array of objects.

  const [activeIdx, setActiveIdx] = React.useState(0);

  <button type="button" data-testid={'btn-test} 
     onClick={() => {setActiveIdx(() => index); inner.cb(index)}}key={inner.id}>
     {inner.title}</button>

This button clicks and sets the active index of the button clicked as this is a button group. How would I test the onClick function in jest/react-testing library?

I have some tests that check a few things like:

    it('Should render without crashing', (): void => {
        const div = document.createElement("div");
        ReactDOM.render(<ButtonGroup data={Data}/>, div);
        ReactDOM.unmountComponentAtNode(div);
    });

    const btn = screen.getByRole('button', {name: '1 hour'});

    it('Should be clicked', (): void => {
       fireEvent.click(btn);
       expect(btn).toBeValid();
    });

But how to mock the function and check that?


Solution

  • This actually goes against the core idea of testing library where

    Testing Library encourages you to avoid testing implementation details like the internals of a component

    There are two solutions you can try:

    1. Create a visual response based off the state change, then check for that visual response
    2. Export a function that you use in onClick then within the test you can mock that function to see if it was called, what was returned, etc.