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?

CodePudding user response：

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.

CodePudding user response：

You can simulate a click with Enzyme, here is a blog about it https://preactjs.com/guide/v10/unit-testing-with-enzyme/.

wrapper.find('btn').simulate('click');