import {render,screen,cleanup,waitFor, fireEvent}from "@testing-library/react" import { BrowserRouter} from "react-router-dom"; import Header from "../Header"; const CustomRender = () =>{ return ( <BrowserRouter> <Header/> </BrowserRouter> ) } describe("Header", ()=>{ describe("icon should either display or hide nav bar", ()=>{ test("should render nav visible",()=>{ render(<CustomRender/>) const icon = screen.findByRole("div", {name : /menu__nav-icon__reactIcon/i}) fireEvent.click(icon) const nav = screen.findByRole("ul", {name : /nav/i}) waitFor(()=>expect(nav).toBeInTheDocument()) }) }) })

Como puede ver, mi componente de encabezado no tiene accesorios. Entonces, el propósito aquí es simple, dentro del componente hay un estado booleano que podría usar para que mi prueba funcione bien.

Básicamente, cuando se hace clic en el ícono, quiero asegurarme de que el estado booleano sea verdadero y luego espero que la navegación esté en el documento o sea visible, tengo que verificar cuál es mejor.

Entonces, mi pregunta es cómo, desde el archivo Header.test.js, llegar a ese estado booleano dentro de mi componente de función.