如何使用 react 测试库 jest 通过点击事件测试 useState 和 useEffect？答案

【问题标题】：How test usestate and useEffect with click events using react testing library jest?如何使用 react 测试库 jest 通过点击事件测试 useState 和 useEffect？
【发布时间】：2022-12-14 03:18:49
【问题描述】：

我正在尝试测试 useState 功能，该功能在调用 useEffect 时也会更新。

我要测试的是在初始阶段 useState 值为 false，然后它会在单击事件时发生变化。

请查看我在下面尝试的代码：

it("should have initial state false", async () => {
    const setStateMock = jest.fn();
    const useSateMock = (useState) => [useState, setStateMock];

    jest.spyOn(React, "useState").mockImplementation(useSateMock);

    render(<Dropdown placeholder="placeholder name" options={testOptions} />, { wrapper: BrowserRouter });
    const dropdwonBtn = screen.getByTestId("dropdownBtn");
    fireEvent.click(dropdwonBtn);
    expect(setStateMock).toBeFalsy();
});

我的下拉组件的代码；

const [showDropdown, setShowDropdown] = useState(false);

useEffect(() => {
    const handler = () => setShowDropdown(false);

    window.addEventListener("click", handler);
    return () => {
        window.removeEventListener("click", handler);
    };
}, [""]);

const handleDropdownClick = (e) => {
    e.stopPropagation();
    setShowDropdown(!showDropdown);
};

我得到的错误

感谢任何帮助，感谢一百万

【问题讨论】：

标签： reactjs unit-testing jestjs react-testing-library react-testing

【解决方案1】：

我不确定您是否可以模拟 useState。但这不是您应该尝试的事情。

相反，当您的 showDropdown 值从 true 变为 false 时。我猜你的下拉菜单应该变得不可见。因此，在单击按钮之前断言它是可见的。然后使用 userEvent 单击按钮，然后检查下拉列表是否不再可见。

【讨论】：