如何測試反應鈎子方法？

Question

我正在使用 jest/istanbul 來跟蹤代碼覆蓋率。 我有以下組件：

 // Menu.jsx    
  const myComponent = ({ initialState }) = {
        const [state, setState] = useState(initialState);
        const [menuContent, setMenuContent] = useState(undefined);

        return (
            <Menu>
                {state.accordions.map(item, index) => (
                    <MenuPanel id={item.id}>
                        {item.details && typeof item.details === 'function'
                            ? <item.details setContent={myContent => setMenuContent(myContent)} />
                            : undefined}
                    </MenuPanel>
                )}
            </Menu>
        )
    }

在我對Menu.jsx的測試中，開玩笑的覆蓋率報告抱怨我的測試沒有涵蓋setMenuContent 。 我應該如何測試這樣的鈎子？ 我認為這是不可能的。 我嘗試測試子組件上是否存在setContent道具，但這沒有幫助。 關於如何讓它通過覆蓋率報告的任何想法？ 我在測試中使用淺渲染。

Answer 1

您可以為這個特定組件模擬 useState ，試試這個：

const stateMock = jest.fn();

jest.mock('react', () => {
  const ActualReact = require.requireActual('react');
  return {
    ...ActualReact,
    useState: () => ['value', stateMock], // what you want to return when useContext get fired goes here
  };
});

每次您的組件調用useState ，您的stateMock都會被觸發，您的案例將被覆蓋

這只是您可以做的一個最小示例，但您可以增強模擬以識別每個 state 調用

如果你想保持 React state 的默認行為，你可以在組件主體之外聲明你的回調 function ，在你的情況下，相關的代碼行在這里：

<item.details setContent={myContent => setMenuContent(myContent)} />

因此，您可以將其從組件中取出並執行以下操作，而不是這個匿名的 function 可能導致 memory 泄漏：

   const setContent = (setMenuContent) => (myContent) => setMenuContent(myContent)


  const myComponent = ({ initialState }) = {
    const [state, setState] = useState(initialState);
    const [menuContent, setMenuContent] = useState(undefined);

    return (
        <Menu>
            {state.accordions.map(item, index) => (
                <MenuPanel id={item.id}>
                    {item.details && typeof item.details === 'function'
                        ? <item.details setContent={setContent(setMenuContent)} />
                        : undefined}
                </MenuPanel>
            )}
        </Menu>
    )
}

現在您可以導出此 function 並用文本覆蓋它，這將允許您模擬 setMenuContent

export const setContent = (setMenuContent) => (myContent) => setMenuContent(myContent)

您的最后一個選擇是使用酶或 react-testing-lib 之類的東西，在 dom 中找到這個item.details組件並觸發點擊操作