click() doesn't quite work for div role="radio"

First, thanks for this library - great abstraction.

I just tried to use the userEvent.click() function on a radio button that is implemented as <div role="radio" /> (e.g. @palmerhq/radio-group) and it didn’t quite yield the same expected behavior as directly calling fireEvent.click(). I see the click logic currently looks for <input type="radio" /> and calls clickBooleanElement, but this implementation of a radio button falls through to clickElement.

In the actual application, clicking said radio button moves the focus to an input field that becomes enabled when this radio button is selected. If I use fireEvent.click to select the radio button, asserting focus to be on the text input afterwards is successful. But using userEvent.click causes the focus assertion to fail.

The current published version of @testing-library/user-event results in the radio div retaining focus. I locally modified it to check for this type of element and call clickBooleanElement instead, but that doesn’t seem to be quite right either. In that version, body ends up with focus.

Thoughts?

[kentcdodds]

🎉 This issue has been resolved in version 10.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[kentcdodds]

I believe this actually is evidence of an issue we should address in user-event. We’ve discussed this in the past and I assumed that we didn’t need to worry about wrapping userEvent in act, but based on this example, I think it’s clear we need to figure out a way to automatically wrap userEvent in act.

https://codesandbox.io/s/user-event-issue-188-o0281?file=/src/__tests__/App.test.js:316-358

  act(() => { // <-- required for this to work
    user.click(custom)
  })

Any ideas on how to do this effectively would be welcome.

What I’m personally thinking is we could add a configuration option to @testing-library/dom for wrapping fireEvent in act just like we do for the async act stuff. https://github.com/testing-library/react-testing-library/blob/0afcbea3c3d1ddce218a36d963d39fa83f9a7cf6/src/pure.js#L12-L20

That way, if someone imported @testing-library/react, they would automatically configure @testing-library/dom to wrap fireEvent in act rather than having to do this fancy stuff.

To be clear, we wouldn’t specifically include act in @testing-library/dom, but would instead enable people to do whatever they link whenever an event is fired.

I have a good idea of what this will be in my head and I’ll probably work on it tomorrow morning.