fireEvent.click 后组件未更新答案

【问题标题】：Component not updating after fireEvent.clickfireEvent.click 后组件未更新
【发布时间】：2021-09-16 18:17:16
【问题描述】：

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

【问题讨论】：

您能向我们展示您的Button 组件吗？看起来你有自定义的道具，比如text，这会影响测试的结果。
还要注意queryByText不是异步方法，你不应该使用await。除非您打算改用findByText？
我刚刚添加了Button组件@robert-corponoi。
我使用了 async 和 await 因为我没有做些什么来让它工作@juliomalves

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

【解决方案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();
    });

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

【讨论】：