[RFC] beforeEach as a story hook for imperative code #26649
Replies: 1 comment 4 replies
-
How to handle aborting the rendering pipeline?Related: #26723 The proposal for the new pipeline is:
The problemAny of these steps could take a long time to finish, and the user could navigate to another story during or between any of these steps. If not handled properly, this could cause race conditions with multiple stories loading/playing/anything simultaneously, while depending on the same global variable. This will especially become a problem with our module-mock proposal which relies on global mocks being configured and restored in each story. Essentially any pattern with side-effects will have issues with this. Here is a demonstration of race conditions happening when loading multiple stories: https://stackblitz.com/~/edit/github-hhu8hi It's just using a global variable, but imagine it was a mock that got changed with Proposed solutions1. Reload the preview
|
Beta Was this translation helpful? Give feedback.
-
Status: implemented
At the moment, Storybook is designed to work well when you can pass state in a fully declarative way. For example, pass data to a component or context provider like below:
However, there might be state that need to be set in a more imperative way.
In general, any singleton data that lives outside of the component tree.
A good example is setting mock data to the spies that you can create with
@storybook/test
. What is the natural place to set a mock implementation?Or an imperative call to change the global Date instance:
For those kind of use cases we are introducing
beforeEach
as a new CSF concept:When you attach
beforeEach
it to the default export, it will runbeforeEach
story. Before the component is mounted or theplay
function.Similar as
beforeEach
invitest
, it can accept an async function, and you can return a cleanup function as well:However, we recommend in general, to cleaning up any hanging state in a preview
beforeEach
function:The preview function will run before the
beforeEach
defined on the default export, and both will run before thebeforeEeach
defined on the story.We want users to still be able to work with Storybook in fully declarative way, even when dealing with state that is fundamentally not declarative, as the examples above. For that we want to introduce extend the concept of story args.
At this moment all args of the story are automatically applied to the component. We would like to introduce “$-prefixed-args” as a way to make sure the arg is not automatically applied to the component. Those non-component args, can then be used to work mock data in a fully declerative way (and also controllable in the args panel):
Beta Was this translation helpful? Give feedback.
All reactions