1

背景：

我创建了一个自定义钩子，useModal()用于包装一些用于在应用程序周围创建/销毁模式的状态：

import { useState } from "react";

export default function useModal(){
    let [isShow, setIsShow] = useState(false);
    let [modalTitle, setModalTitle] = useState("");
    let [modalContent, setModalContent] = useState("");

    const showModal = (title = false, content = false) => {
        setIsShow(true);
        if (title) setModalTitle(title);
        if (content) setModalContent(content);
    };

    const hideModal = () => {
        setIsShow(false);
        setModalContent("");
        setModalTitle("");
    };

    return { isShow, showModal, hideModal, modalTitle, modalContent };
};

该钩子在应用程序周围使用时工作得非常好，但是当尝试使用 Jest 在它周围添加一些单元测试时，它会在尝试从钩子访问任何返回的项目时抛出以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component

这是单元测试：

import useModal from "./useModal";
import { renderHook, act } from "@testing-library/react-hooks";

describe("When modal is shown", () => {
    it("IsShow should be true", () => {
        const { result } = renderHook(() => useModal());

        act(() => {
            result.current.showModal("A title", "Some content");
        })  

        expect(result.current.isShow).toBe(true);
    });
});

尝试的事情：

我对这个问题的所有阅读都表明这是功能组件安装方式的问题，因此，安装@testing-library/react-hooks提供包装器的包来解决这个问题

https://react-hooks-testing-library.com/usage/basic-hooks

使用的软件包版本：

"@types/jest": "^27.4.0"
"@testing-library/jest-dom": "^5.16.2"
"@testing-library/react": "^12.1.2"
"@testing-library/react-hooks": "^7.0.2"
"react": "^17.0.2"
"react-dom": "^17.0.2"
4

0 回答 0