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

Question

我试图在其中一个测试中达到 100% 的覆盖率，它突出显示了设置组件状态的 onClick 函数：这是组件：

我有一个按钮，它具有如下所示的 onClick 功能，该按钮是从对象数组映射进来的。

  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>

此按钮单击并设置单击按钮的活动索引，因为这是一个按钮组。我将如何测试 jest/react-testing 库中的 onClick 函数？

我有一些测试会检查一些事情，例如：

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

但是如何模拟函数并检查呢？

Answer 1

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

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

Answer 2

这实际上是 goes against the core idea of testing library 其中

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

您可以尝试两种解决方案：

根据状态变化创建视觉响应，然后检查该视觉响应
导出您在 onClick 中使用的函数，然后在测试中 you can mock that function 查看它是否被调用，返回了什么，等等

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

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

javascript

reactjs

jestjs

react-test-renderer

react-testing-library