Description

This is a simpler alternative to #18855, and, to some extent, addresses #17249.

Comparing to #18855, we lose some features like simulating real user interactions.

@testing-library/react provides a fireEvent util, whose implementation is pretty much like this:

import { act } from 'react-dom/test-utils';

const fireEvent = {
  click( element, options ) {
    return act(
      () => element.dispatchEvent( 'click', options )
    );
  },
  mouseDown() { ... },
  ...
};

So, calling fireEvent.click will only dispatch the click event, not the whole event stack dispatched by browsers when users perform a click action, such as mouseDown, mouseUp etc.

On the other hand, this PR is much smaller, and we don't have to maintain a new package as in #18855. If we do need those test utilities, the PR is there and we can merge it in the future. But just adding @testing-library/react here is already a big improvement over the current unit testing approaches we have in this project. Namely, react-dom/test-utils, react-test-renderer and enzyme, as demonstrated in #17249 (comment).

As an implementation example, this PR improves the SlotFill tests that weren't covering the bubblesVirtually case (react-test-renderer doesn't support portals). This issue was mentioned on #19242 (comment).

How has this been tested?

npm run test-unit

Screenshots

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.