Automated Testing: Unskip tests blocked by Enzyme support of React 16.3

[aduth]

Previously: https://github.com/WordPress/gutenberg/pull/6527/files#r185974677

We currently skip tests which rely on React.forwardRef because they are not supported yet by Enzyme:

gutenberg/components/button/test/index.js

Lines 106 to 118 in 400f8fc

	// Disable reason: This test is desirable, but unsupported by Enzyme in
	// the current version, as it depends on features new to React in 16.3.0.
	//
	// eslint-disable-next-line jest/no-disabled-tests
	describe.skip( 'ref forwarding', () => {
	it( 'should enable access to DOM element', () => {
	const ref = createRef();
	mount( <ButtonWithForwardedRef ref={ ref } /> );
	expect( ref.current.nodeName ).toBe( 'button' );
	} );
	} );

This is tracked by the Enzyme project at enzymejs/enzyme#1604

Once the above issue is closed and Enzyme produces a new release introducing support for React.forwardRef, we should remove the workarounds introduced by #6527 .

Open questions:

• What else do we use from React 16.3 that isn't supported by Enzyme that will need to be updated?
• What components other than Button have tests which need to be updated?

[gziolo]

I just wanted to add that all tests that we skip currently are blocked by Enzyme's upgrade.

[gziolo]

This is how similar issues were fixed by @nerrad using React.TestUtils: #7835, #7834. We should go this route instead of waiting for enzyme to be upgraded.

[nerrad]

Ya although its a pain, the more you work react-test-utils, and react-dom/test-utilities the less of a hassle it becomes. Definitely more reliable. It's kind of odd that the official react docs still suggest using enzyme.

[nerrad]

Also worth noting that under the hood enzyme uses the various react test utilities.

[aduth]

Can we make sure to cross-reference pull requests meant to be addressing (or partially addressing) this issue.

[nerrad]

As far as I know there's only one skipped (unit) test now.

[aduth]

Which pull requests are those? I'd like to keep record here for historical purposes.

[nerrad]

The pulls I fixed skipped tests related to this were:

• remove test from being skipped (editor/hooks/test/align.js) #7837
• remove tests from being skipped (components/disabled/test/index.js) #7835
• Remove test from being skipped for button.js #7834

The pulls I converted away from enzyme (because they failed in #7557) are:

• Switch away from using enzyme.mount in tests (viewport/test/with-viewport-match.js) #7828
• Switch tests away from using enzyme.mount (components/higher-order/with-state/test/index.js) #7829
• Switch tests away from using enzyme.mount (components/higher-order/with-focus-outside/test/index.js) #7827
• Switch away from using enzyme for tests (components/higher-order/with-focus-return/test/index.js) #7815
• Switch tests away from using enzyme.shallow (components/higher-order/with-api-data/test/index.js) #7798
• Switch tests away from using enzyme.mount (components/toggle-control/test/index.js) #7797
• Switch tests away from enzyme.mount (components/higher-order/with-context/test/index.js) #7796
• Switch tests from using enzyme.mount (components/tab-panel/test/index.js) #7794
• Switch away from using enzyme.mount in tests (components/higher-order/with-filters/test/index.js) #7793
• Switch tests away form using enzyme.mount (components/popover/test/index.js) #7790
• convert all tests to use React.TestRenderer (viewport/test/if-viewport-matches.js) #7788
• Switch test from using enzyme.mount to use React.TestUtilities (components/range-control/test/index.js) #7787
• Switch test away from using enzyme.mount (editor/components/url-input/test/button.js) #7786
• Switch test away from enzyme.mount usage (components/dropdown-menu/test/index.js ) #7784
• Convert enzyme tests to use React.TestUtilities (components/dropdown/test/index.js) #7780
• Converts tests for FormTokenField to use React.TestUtils #7777
• Convert tests using enzyme to use react-test-renderer instead (components/inserter/test/menu.js) #7773
• Convert snapshots to use react-test-renderer/shallow (core-blocks/more/test/edit.js) #7756
• Convert some enzyme tests that involve HOCs to react-test-renderer (align.js) #7752