Soy nuevo en Jest y en la biblioteca de pruebas. Tengo un componente NavbarContainer que renderiza un botón u otro dependiendo de una variable (menuOpen) que se está cambiando con una función. Ya verifiqué que la variable cambia su valor después del fireEvent, sin embargo, parece que el componente no se está actualizando. ¿Qué estoy haciendo mal?
Aquí está mi componente
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> ); };Aquí está el botón
export const Button = ({ text, type = "button", functionality, disabled = false}) => { return ( <button onClick={functionality} type={type} disabled={disabled}>{i18n.t(text)}</button> ); };Estos son los valores y funciones que paso al componente NavbarContainer
const [menuOpen, setMenuOpen] = useState(false); const [activeLink, setActiveLink] = useState(""); const openMenu = (link) => { setMenuOpen(!menuOpen); setActiveLink(link.toString()); };Aquí están mis pruebas
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(); }); });Aquí está el error que estoy recibiendo
expect(received).toBeInTheDocument() the received value must be an HTMLElement or an SVG element. Received has value: nullDado que su navbar.menu puede tardar unos segundos en aparecer después de hacer clic, debe usar findBy para intentar seleccionar su elemento. Esto agrega un tiempo de espera de 5 segundos para intentar encontrar el elemento. Si aún no ha aparecido después de 5 segundos, entonces probablemente haya algo más en su código.
Si desea que su prueba sea asíncrona, le recomendaría que su primera llamada también sea findBy en lugar de queryBy, ya que queryBy no es una llamada asíncrona.
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(); });Probablemente tampoco necesite esa última llamada esperada porque si no puede encontrar el elemento navbar.menu a través de la llamada anterior, fallará de todos modos. Lo mismo si lo encuentra.