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

As you can see my Header component doesn't have any props. So the purpose here is simple, inside the component there is a boolean state which I could use to get my test work fine.

Basically when icon is clicked I want to make sure the boolean state is true and then I expect nav is in the document or is visible, I have to check which one is better.

So my question is how, from the Header.test.js file, to get to that boolean state within my function component?