Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add react-testing-library #20428

Merged
merged 4 commits into from
Apr 6, 2020
Merged

Add react-testing-library #20428

merged 4 commits into from
Apr 6, 2020

Conversation

diegohaz
Copy link
Member

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.

Comment on lines +4 to +13
<div>
<div
data-position="first"
/>,
/>
<div
data-position="second"
>
Content
</div>,
]
</div>
</div>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the snapshots will have this wrapping div added by react-testing-library.

Comment on lines 29 to 44
exports[`Slot bubblesVirtually true should subsume another slot by the same name 1`] = `
Array [
<div>
<div
data-position="first"
>
<div />
</div>,
</div>
<div
data-position="second"
>
<div />
</div>,
]
<div>
Content
</div>
</div>
</div>
`;
Copy link
Member Author

@diegohaz diegohaz Feb 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now Portal works! :)

@github-actions
Copy link

github-actions bot commented Feb 25, 2020

Size Change: 0 B

Total Size: 889 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.4 kB 0 B
build/api-fetch/index.js 3.79 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.03 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 102 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.22 kB 0 B
build/block-library/index.js 110 kB 0 B
build/block-library/style-rtl.css 7.53 kB 0 B
build/block-library/style.css 7.54 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/index.js 195 kB 0 B
build/components/style-rtl.css 16.6 kB 0 B
build/components/style.css 16.5 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.7 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.23 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.05 kB 0 B
build/edit-navigation/index.js 2.71 kB 0 B
build/edit-navigation/style-rtl.css 239 B 0 B
build/edit-navigation/style.css 241 B 0 B
build/edit-post/index.js 92.9 kB 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-site/index.js 10.1 kB 0 B
build/edit-site/style-rtl.css 5.02 kB 0 B
build/edit-site/style.css 5.02 kB 0 B
build/edit-widgets/index.js 7.18 kB 0 B
build/edit-widgets/style-rtl.css 3.74 kB 0 B
build/edit-widgets/style.css 3.73 kB 0 B
build/editor/editor-styles-rtl.css 400 B 0 B
build/editor/editor-styles.css 402 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.49 kB 0 B
build/editor/style.css 3.49 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.7 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.5 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@diegohaz diegohaz self-assigned this Feb 25, 2020
@diegohaz diegohaz added [Type] Enhancement A suggestion for improvement. [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. labels Feb 25, 2020
@youknowriad youknowriad requested a review from gziolo February 25, 2020 08:22
@ItsJonQ
Copy link

ItsJonQ commented Feb 27, 2020

This is awesome!! Making Portals work seamlessly with testing is a big win. Not only that, but it looks like we're making tests easier to write as well with react-testing-library 😊

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's give it a try. It needs to be rebased :)

@diegohaz diegohaz merged commit fffcd97 into master Apr 6, 2020
@diegohaz diegohaz deleted the add/react-testing-library branch April 6, 2020 10:48
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 6, 2020
@gziolo
Copy link
Member

gziolo commented Apr 6, 2020

One more thing, if this turns out to be useful, we should add RTL as a dependency for @wordpress/jest-preset-default and documented properly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants