I'm new to Jest and the testing library. I have a NavbarContainer ponent 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 ponent it's not updating. What am I doing wrong?

Here there is my ponent

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 ponent

    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 ponent;
    let menuOpen = true;
    const openMenu = () => {
        menuOpen = !menuOpen;
    };
    beforeEach(() => {
        ponent = render(
            <BrowserRouter basename="/">
                <NavbarContainer menuOpen={menuOpen} functionality={openMenu} activeLink=""/>
            </BrowserRouter>
            
        );
    });
    it("after click the menu button is shown", async () => {
        const backButton = ponent.queryByText("navbar.back");
        await fireEvent.click(backButton);
        const menuButton = await ponent.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

I'm new to Jest and the testing library. I have a NavbarContainer ponent 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 ponent it's not updating. What am I doing wrong?

Here there is my ponent

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 ponent

    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 ponent;
    let menuOpen = true;
    const openMenu = () => {
        menuOpen = !menuOpen;
    };
    beforeEach(() => {
        ponent = render(
            <BrowserRouter basename="/">
                <NavbarContainer menuOpen={menuOpen} functionality={openMenu} activeLink=""/>
            </BrowserRouter>
            
        );
    });
    it("after click the menu button is shown", async () => {
        const backButton = ponent.queryByText("navbar.back");
        await fireEvent.click(backButton);
        const menuButton = await ponent.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

• javascript
• reactjs
• jestjs
• react-testing-library
• testing-library

• 1 Can you show us your Button ponent? It looks like you have custom props, like text that will effect the oute of the test. – Bob Commented Sep 12, 2021 at 16:53
• Also note that queryByText is not an async method, you shouldn't use await with it. Unless you meant to use findByText instead? – juliomalves Commented Sep 12, 2021 at 18:19
• I have just added the Button ponent @robert-corponoi. – Chochomona Commented Sep 16, 2021 at 10:08
• I used the async and await because I didn't what to do to make it work @juliomalves – Chochomona Commented Sep 16, 2021 at 10:08

1 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 remend 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 ponent.findyByText("navbar.back");
        await fireEvent.click(backButton);
        const menuButton = await ponent.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.