如何使用 onClick 函數 Jest/React 測試庫測試 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

這實際上違背了測試庫的核心思想，其中

測試庫鼓勵您避免測試實現細節，例如組件的內部結構

您可以嘗試兩種解決方案：

1. 根據狀態變化創建視覺響應，然后檢查該視覺響應
2. 導出您在onClick使用的函數，然后在測試中您可以模擬該函數以查看它是否被調用、返回了什么等。

Answer 2

你可以用 Enzyme 模擬點擊，這里有一個關於它的博客https://preactjs.com/guide/v10/unit-testing-with-enzyme/ 。

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