Skip to content

Commit

Permalink
Fix erroneous react-dom usage in native tests (#37921)
Browse files Browse the repository at this point in the history
* Reinstate react-platform.native.js file

This file was removed in the following commit, as it was no longer
strictly necessary. b7b62d2#diff-f02069349f238fb47a268bb7fcc03c9768331db18ead0e28d8ecad7bbc05037c

However, the removal led to Jest loading the DOM-specific version of the
file when mocking Gutenberg modules that depended upon
`react-platform.js`. Jest would seemingly load `react-dom` when
attempting to auto-mock a module, e.g. `jest.mock( '@wordpress/data/src/components/use-select' );`.

The loading of `react-dom` resulted in the following error:

```
TypeError: Cannot use 'in' operator to search for 'WebkitAnimation' in undefined

  at getVendorPrefixedEventName (node_modules/react-dom/cjs/react-dom.development.js:5011:58)
  at node_modules/react-dom/cjs/react-dom.development.js:5019:21
  at Object.<anonymous> (node_modules/react-dom/cjs/react-dom.development.js:26261:5)
  at Object.<anonymous> (node_modules/react-dom/index.js:37:20)
```

Reinstating `react-platform.native.js` addresses this issue by ensuring
that Jest does not encounter an import of `react-dom`.

* Fix false-positive ReactNativeEditor test

This test failed when run in isolation. It would appear it was dependent
upon the `jest.mock('../setup')` found in sibling tests.

After defining a mock for this specific test, it was discovered that the
assertion did not await the asynchronous query found within the test.
The assertion resulted in a false-positive as the returned query
`Promise` technically matches `toBeDefined`. `async`/`await` was added
to ensure the test assertion awaits the query result, as well as fixes
the following related log warning.

```
A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
```
  • Loading branch information
dcalhoun authored and gziolo committed Jan 14, 2022
1 parent 0420fce commit b418dba
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 7 deletions.
14 changes: 14 additions & 0 deletions packages/element/src/react-platform.native.js
@@ -0,0 +1,14 @@
/**
* External dependencies
*/
import { AppRegistry } from 'react-native';

/**
* Registers an app root component allowing the native system to run the app.
*
* @param {string} appKey Unique app name identifier.
* @param {Function} componentProvider Function returning the app root React component.
*/
export const registerComponent = ( appKey, componentProvider ) => {
AppRegistry.registerComponent( appKey, componentProvider );
};
5 changes: 2 additions & 3 deletions packages/react-native-editor/src/index.js
Expand Up @@ -2,13 +2,12 @@
* External dependencies
*/
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';

/**
* WordPress dependencies
*/
import { applyFilters, doAction } from '@wordpress/hooks';
import { Component, cloneElement } from '@wordpress/element';
import { Component, cloneElement, registerComponent } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -77,7 +76,7 @@ const registerGutenberg = ( {
}
}

AppRegistry.registerComponent( 'gutenberg', () => Gutenberg );
registerComponent( 'gutenberg', () => Gutenberg );
};

export { initialHtml as initialHtmlGutenberg, registerGutenberg, setupLocale };
18 changes: 14 additions & 4 deletions packages/react-native-editor/src/test/index.test.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { AppRegistry } from 'react-native';
import { AppRegistry, Text } from 'react-native';
import { render, waitFor } from 'test/helpers';

/**
Expand Down Expand Up @@ -176,9 +176,19 @@ describe( 'Register Gutenberg', () => {
expect( hookCallOrder ).toBeGreaterThan( onRenderEditorCallOrder );
} );

it( 'initializes the editor', () => {
const { getByTestId } = initGutenberg();
const blockList = waitFor( () => getByTestId( 'block-list-wrapper' ) );
it( 'initializes the editor', async () => {
const MockEditor = () => <Text>Mock Editor</Text>;
jest.mock( '../setup', () => {
return {
__esModule: true,
default: jest.fn( () => <MockEditor /> ),
};
} );

const screen = initGutenberg();
const blockList = await waitFor( () =>
screen.getByText( 'Mock Editor' )
);
expect( blockList ).toBeDefined();
} );
} );

0 comments on commit b418dba

Please sign in to comment.