Tengo este componente React que tiene un bloque que se procesa en función de una respuesta API.

 const SomeComponent = () => { const [render, setRender] = useState(false) const handleClick = async () => { const someFunction = await callToAPI() if (someFunction) { setRender(true) } } return ( <main> <button onClick={handleClick}></button> <ShouldRender when={render} data-test-id='should-render'> Something </ShouldRender> </main> ) }

Mientras escribo la prueba, no sé cómo probar esta representación condicional. Me gustaría saber si hay alguna manera de usar algo como fireEvent para establecer este estado en mi archivo SomeComponent.test.js .

Hasta ahora la prueba se ve así:

 test('renders component when button is clicked', () => { render(<SomeComponent />) const button = screen.queryByRole('button') fireEvent.click(button) const conditionalComponent = screen.getByTestId('should-render') expect(conditionalComponent).toBeInTheDocument() })