Component not updating after fireEvent.click

Question

I'm new to Jest and the testing library. I have a NavbarContainer component that renders one button or another depending on a variable (menuOpen) that it's being changed with a function. I have already checked that the variable changes its value after the fireEvent, however, it seems like the component it's not updating. What am I doing wrong?

Here there is my component

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>
    );
};

Here is the button

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

Here are the values and functions I am passing to the NavbarContainer component

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

Here are my tests

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();
    });
});

Here is the error I'm getting

    expect(received).toBeInTheDocument()

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

Answer 1

Since it might take a few seconds for your navbar.menu to appear you after your click, you need to use findBy to try and select your item. This adds a timeout of 5 seconds to try and find the item. If it still hasn't appeared after 5 seconds, then there is probably something else going on with your code.

If you want your test to be async, then I would recommend that your first call also be a findBy rather than a queryBy since queryBy isn't an asynchronous call.

    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();
    });

You also probably don't need that last expect call because if it can't find the navbar.menu item via the previous call, then it would fail anyway. Same if it finds it.