Set class on pseudo-states

Problem description

Currently, it is impossible to test hover states with JavaScript. One common solution for this is to use a special class for hovered elements instead of the pseudo-class :hover.

In storybook, there is an addon for this. There's also one (which I use) for postcss, which is great: replaces :hover in CSS with .\:hover, so the hover states is activated with class=":hover" instead of a real hover.

Note that this works with all pseudo-states, not just hover. The issue is that it is difficult to correctly apply the classes manually (and remove them), on actions such as hover, type, etc.

Suggested solution

A configuration option (generally to be used with userEvent.setup()) names pseudoStates with the following form:

type PseudoStates = Record<"hover" | "focus" | ... , {
    // Class to be applied to element when it should be in the pseudo-state
    class?: string
    // Other options, such as for setting a "data-*" attribute instead
}>

Additional context

If you think this is a good idea which fits with testing library, I would be willing to make a PR for this.

Start by reviewing the userEvent.setup() configuration and the proposed PseudoStates shape in the issue. Determine how pseudo-state classes or attributes should be configured for interactions such as hover and typing, and consider the corresponding test coverage; done means the behavior is defined and verified for the supported pseudo-states.