javascript - Component not updating after fireEvent.click - Stack Overflow

admin管理员组

文章数量:1391987

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

Share Improve this question Follow edited Sep 16, 2021 at 10:07 Chochomona asked Sep 12, 2021 at 15:41 ChochomonaChochomona 5511 gold badge22 silver badges1010 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： javascriptComponent not updating after fireEventclickStack Overflow