I have this React component that has a block that renders based on an API response.

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

As I'm writing the test for it, I'm confused on how to test this conditional rendering. I'd like to know if there's a way to use something like the fireEvent to set this state in my SomeComponent.test.js file.

So far the test looks like this:

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