Interactions with userEvent are not executed before happo snapshots

[Q-Man]

I'm using Storybook in combination with @storybook/addon-interactions, so I can define play functions that perform UI interactions before the snapshot is taken.

Interactions with fireEvent are working correctly, they're executed before the snapshot is taken.

Interactions with userEvent are working in storybook, but are not executed before the snapshot is taken.

Is that unsupported or is it a bug?

I created a demo repo to demonstrate this:
https://github.com/Q-Man/happo-storybook-userevent/

Here's my code:

import React from 'react'
import {userEvent, screen, fireEvent} from "@storybook/testing-library"

const Test = () => {
  return <div>
    <input type="radio" name="test" id="test1"/>
    <label htmlFor="test1">test1</label>
    <input type="radio" name="test" id="test2"/>
    <label htmlFor="test2">test2</label>
  </div>
}

const meta = {component: Test}

export const Default = {}

export const WithFireEvent = {
  play: async () => {
    // this is correctly executed before the snapshot
    await fireEvent.click(screen.getByLabelText('test2'))
  }
}

export const WithUserEvent = {
  play: async () => {
    // this is working in the storybook UI, but not executed before the snapshot
    await userEvent.click(screen.getByLabelText('test2'))
  }
}

export default meta

These are the resulting Happo snapshots:

[trotzig]

Thanks for the report -- I'll have a look at this and see if I can figure out a fix after the weekend. 🙏

[trotzig]

Thanks for making the reproduction repo, it's been a great help when debugging this! 🎉

It looks like this is because we are setting pointer-events: none on the whole document when we take screenshots. We do this to prevent spurious hover effects caused in certain environments (read: Microsoft Edge on Windows). I'm working on changing this right now.

[trotzig]

I've made an update to our workers and things are looking better:

Thanks for filing the issue and the help with the repo!

At first I thought this was because of the event happening asynchronously, so I did some work on happo-plugin-storybook as well, there's a new version with slightly better behavior around user events: https://github.com/happo/happo-plugin-storybook/releases/tag/v3.2.4 . Note however that this release isn't needed in your case, the worker update I did is enough to make the user event work.

[trotzig]

Oh, forgot to mention: this is fixed in Chrome and Firefox for now. Safari will be updated in our next release cycle which should be in the next couple of weeks.

[Q-Man]

Thank you for the quick fix, it's working. 🎉

I observed another thing with userEvent, opened another ticket for this:
#97

[trotzig]

Just a quick note here -- I had to revert this change/fix on our workers. I'll come up with a better fix tomorrow, the one I deployed had some side-effects that weren't great. I'll update this thread when I have a proper fix!

[trotzig]

It turns out that pointer-events:none was quite important after all, so removing it led to a few unwanted side-effects. To make it possible to use userEvents however, I've added a new configuration option in .happo.js: allowPointerEvents: true. See documentation here: https://docs.happo.io/docs/configuration#target-allowpointerevents

I tried hard to avoid having to use a configuration option, but it ended up being really tricky to avoid all types of spurious hover effects caused by allowing pointer-events. 🤷‍♂️