onBlur and onFocus events do not fire when running against React 17.x

• @testing-library/user-event version:

"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.0.0",
"@testing-library/user-event": "^13.0.1",

• Testing Framework and version:

"jest": "^26.0.1",

• DOM Environment: Default jest env using tsdx test

Relevant code or config

          // Act
          expect(document.body).toHaveFocus();

          // Tab in
          userEvent.tab();
          expect(element).toHaveFocus();

          // Tab out
          userEvent.tab();

          // Should have triggered "onBlur"
          expect(handleBlur).toHaveBeenCalledTimes(1);

What you did: I updated from react 16 to react 17. user-event functions that used to trigger blur and focus events no longer trigger those events. I’ve got onBlur and onFocus listeners, so I’d expect them to still be triggered, for example userEvent.tab().

What happened:

● DateTime › end-to-end › events › onBlur › should trigger onBlur with no value when tabbed out with no value

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      2809 |
      2810 |           // Should have triggered "onBlur"
    > 2811 |           expect(handleBlur).toHaveBeenCalledTimes(1);
           |                              ^
      2812 |           expect(element).not.toHaveFocus();
      2813 |           expect(handleBlur).toHaveBeenCalledWith(undefined);
      2814 |         });

      at src/DateTime.test.tsx:2811:30
      at step (node_modules/tslib/tslib.js:143:27)
      at Object.next (node_modules/tslib/tslib.js:124:57)
      at fulfilled (node_modules/tslib/tslib.js:114:62)

Reproduction repository: https://github.com/NateRadebaugh/react-datetime/pull/1789/commits/f058eb1ca2ffc45f556bf7b5cff00883ac878c16

Problem description:

Suggested solution: Tab and other focus/blur-related user events should trigger the appropriate focusin and focusout bubbled events.

https://reactjs.org/blog/2020/08/10/react-v17-rc.html#aligning-with-browsers

[ph-fritsche]

@oriolcp Thanks for clearing this up.

jsdom was the culprit. There was this comment on another issue:

The problem we were seeing was that jsdom 16.2.2 (what we were using at the time) actually didn’t fire focusin or focusout events when those calls were made, as browsers do. But it turns out jsdom actually fixed that in 16.3.0, so just had to upgrade.

[believeinalex]

I just tried to upgrade to React 17 and encountered the same issue.