Conditional rendering in visual tests

How can I show conditionally rendered elements in the visual tests?

or…

How can get visual tests of my components, AFTER the play function has run?

Is there a possible way to do this?

or do I need to create an HOC that handles the state/clickaway… and passes a open=true/false to the inner component?

So I can just write a story for the LOC and switch out the open prop?

Canvas

Snapshot

Open State code

Open.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  await userEvent.click(canvas.getByTestId('ButtonMenuCheckbox-button'))
  const menu = await waitFor(
    () => screen.getByTestId('ButtonMenuCheckbox-menu--loaded'),
    { timeout: 1000, interval: 2000 }
  )
  waitFor(() => screen.getByTestId('ButtonMenuCheckbox-menu--loaded'), {
    timeout: 2000,
    interval: 2000,
  })
  expect(menu).toBeTruthy()
}

Note: There is a 100ms opacity transition on the popper menu that I am trying to also get around. Any tips on this?

[averybross]

Looks like that did the trick, but now my float: right is not working in Chromatic… only in Storybook (which I will eventually fix using your helper)

[averybross]

Thanks!