如何使用 onClick 函数 Jest/React 测试库测试 React 组件

Question

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?

Answer 1

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.

Answer 2

你可以用 Enzyme 模拟点击，这里有一个关于它的博客https://preactjs.com/guide/v10/unit-testing-with-enzyme/ 。

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