Provide user = userEvent.setup() to Play function

[ph-fritsche]

Is your feature request related to a problem? Please describe

user-event@14 allows to create a session per userEvent.setup().
The methods on the object share an input device state. I.e.:

  const user = userEvent.setup()
  await user.keyboard('{Shift>}')
  await user.click(screen.getElementByRole('button')) // This would be a click with shiftKey=true

Applying .setup() and using these methods is recommended.

Describe the solution you'd like

Add user to renderContext.storyContext during the rendering phase.

This should probably be injected by @storybook/testing-library.

Being able to get user per play: ({user}) => { /*... */ } would encourage people to use the recommended approach because it would also be the easiest.

Are you able to assist to bring the feature to reality?

Yes, I can add the necessary code if someone can guide me through your codebase and package structure.

Additional context

I've experimented with Storybook 6.5-alpha and the developer experience improved a lot as many things work out of the box.
It would be great if this change could be added in 6.5 along with the upgrade in storybookjs/testing-library#18 .

[mmirus]

👋 hey there! Should this be reopened? From what I can tell, the changes that completed this were rolled back before #28368 was merged.

[kasperpeulen]

That is correct. We have to make @storybook/test a proper addon first, as now the loaders of @storybook/test are only applied if you import @storybook/test in your stories file. However, this change makes sure that you often don't need to import @storybook/test.

This is an example, how you can do this in userland:
https://github.com/storybookjs/storybook-rsc-demo/blob/7e8e835f4d9df81fd8d0c033016ff16e064c3cee/.storybook/preview.tsx#L22-L30

https://github.com/storybookjs/storybook-rsc-demo/blob/7e8e835f4d9df81fd8d0c033016ff16e064c3cee/.storybook/preview.tsx#L38-L42

Which also has the advantage that you can set your own userEvent options.

[mmirus]

Thank you! As a stopgap, I just plopped this into the play function where I needed it:

  play: async ({ canvasElement, step, parameters }) => {
    const canvas = within(canvasElement);

    /**
     * TODO: refactor to destructure userEvent from context; then we will not
     * need to handle `setup()` ourselves.
     * See https://github.com/storybookjs/storybook/issues/17988
     */
    const user = userEvent.setup();

    // ... the rest of the test

PS - that userEvent is just the one imported from @storybook/test.