We just announced Component Story Format 3.0 that brings play
functions to Storybook.
Play functions are scripted interactions that execute after the story has rendered, allowing you test hard-to-reach states in your UI like form validations and hover states.
Here's a quick example of filling out a form. For more see the announcement:
import { userEvent } from '@storybook/testing-library';
export default { component: AccountForm }
export const Filled = {
play: async () => {
await userEvent.type(screen.getById('user'), 'shilman@example.com');
await userEvent.type(screen.getById('password'), 'blahblahblah');
}
}
One of the first questions we got was "does this work with chromatic?" Amazingly, it does! It's not officially supported, but it works and you can use it today. Over the coming months we'll be adding official support and documentation, and also adding more features.
Chromatic will wait for your play
function to complete before taking a snapshot.
So if you're simulating a hard-to-reach state, it will wait for that to finish.
There are a few gotchas we've encountered so far:
Play
functions are async. If you call other async functions inside the play function, be sure toawait
them all, otherwise Chromatic's screenshot may be inconsistent.- Some interactions take time to show up visually. You may need to add
delay
to your stories with play functions. We might be able to improve this in future iterations. - Chromatic snapshotting times out after 15s total, so don't overdo it!
If play
functions are working fine on your development machine, but you are seeing strange behavior in Chromatic, please get in touch via our Intercom chat on https://chromatic.com!
Hey @shilman, regarding
Chromatic will wait for your play function to complete before taking a snapshot. So if you're simulating a hard-to-reach state, it will wait for that to finish.
:I experience different behaviour with a flaky storybook that is being rendered in the middle of
play
animation.Every async operation inside
play
is usingawait
, so it looks like an issue to me.Can you help with it?
Thanks!