时间戳

首页 > 解决方案 > fireEvent.click 后组件未更新

javascript - fireEvent.click 后组件未更新

问题描述

我是 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

标签： javascriptreactjsjestjsreact-testing-librarytesting-library

解决方案

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

如果您希望您的测试是异步的，那么我建议您的第一个调用也是 afindBy而不是 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();
    });

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

推荐阅读