I have the following component:

import { useState } from 'react';

export function MyComponent() {
  const [val, setVal] = useState(false);

  return (
    

      big container
       setVal(!val)}>click
      {val && 
small container
}
    
  );
}

export default MyComponent;

There is a div containing the text "small container", which only appears when val is true.

I want to write a test in Jest for this, but how can I mock the value of val there?

Here is my code so far:

  it('small container visible only when val is true', () => {
    const { queryByText } = render();
    const toTest = queryByText('small container');
    expect(toTest).not.toBeInTheDocument();
  });

This test passes, but how can the added val be set to true in order to test that toTest is present in the document?