score:3

react hooks are pieces of code that can be reused inside react components. the fact that you're using a hook inside a test is not allowed because that test is not a react component. what you can do is create a wrapper component just for the test that does that:

 test('the user can see the closed text after the toggle has been clicked', async () => {
    const wrapper = () => {
      const [open, setopen] = usestate<boolean>(false); // you can do this inside the wrapper component
      return <toggle value={open} setvalue={setopen} ontext='open' offtext='closed' />
    };
    render(<wrapper />);
    fireevent.click(screen.getbytestid('click'));
    expect(await screen.querybytext('closed')).tobevisible();
  });

this test could add more value if the parent component is tested, because in reality, what you're testing here is that a component executes a callback (in your case setvalue) and that shows certain value, but the logic inside changing that value is not being tested per se.


Related Query

More Query from same tag