javascript - fireEvent.click 后组件未更新

Question

我是 Jest 和测试库的新手。我有一个 NavbarContainer 组件，它根据正在使用函数更改的变量 (menuOpen) 呈现一个或另一个按钮。我已经检查过变量在 fireEvent 之后更改了它的值，但是，它似乎没有更新组件。我做错了什么？

这是我的组件

export const NavbarContainer = ({functionality, menuOpen, activeLink}) => {
    return (
        <div className="navbar-container">
            { menuOpen && <Navbar functionality={functionality} activeLink={activeLink}/> }
            { menuOpen && <Button text="navbar.back" functionality={functionality}></Button> }
            { !menuOpen && <Button text="navbar.menu" functionality={functionality} modificator="back"></Button> }
        </div>
    );
};

这是按钮

export const Button = ({ text, type = "button", functionality, disabled = false}) => {
    return (
        <button onClick={functionality} type={type} disabled={disabled}>{i18n.t(text)}</button>
    );
};

这是我传递给 NavbarContainer 组件的值和函数

    const [menuOpen, setMenuOpen] = useState(false);
    const [activeLink, setActiveLink] = useState("");
    const openMenu = (link) => {
        setMenuOpen(!menuOpen);
        setActiveLink(link.toString());
    };

这是我的测试

describe("NavbarContainer", () => {
    i18n.changeLanguage('cimode');
    let component;
    let menuOpen = true;
    const openMenu = () => {
        menuOpen = !menuOpen;
    };
    beforeEach(() => {
        component = render(
            <BrowserRouter basename="/">
                <NavbarContainer menuOpen={menuOpen} functionality={openMenu} activeLink=""/>
            </BrowserRouter>
            
        );
    });
    it("after click the menu button is shown", async () => {
        const backButton = component.queryByText("navbar.back");
        await fireEvent.click(backButton);
        const menuButton = await component.queryByText("navbar.menu");
        expect(menuButton).toBeInTheDocument();
    });
});

这是我得到的错误

    expect(received).toBeInTheDocument()

    the received value must be an HTMLElement or an SVG element.
    Received has value: null

Answer 1

由于您的 navbar.menu 在您点击后可能需要几秒钟才能出现，因此您需要使用 findBy 来尝试选择您的项目。这会添加 5 秒的超时时间以尝试查找该项目。如果它在 5 秒后仍未出现，则您的代码可能有其他问题。

如果您希望您的测试是异步的，那么我建议您的第一个调用也是 findBy 而不是 queryBy，因为 queryBy 不是异步调用。

    it("after click the menu button is shown", async () => {
        const backButton = await component.findyByText("navbar.back");
        await fireEvent.click(backButton);
        const menuButton = await component.findByText("navbar.menu");
        expect(menuButton).toBeInTheDocument();
    });

您也可能不需要最后一个 expect 调用，因为如果它无法通过上一个调用找到 navbar.menu 项，那么它无论如何都会失败。如果找到它，也是一样。