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

Integration tests: act warnings can still be triggered when testing the editor in multiple tests #38332

Closed
fluiddot opened this issue Jan 28, 2022 · 0 comments · Fixed by #38344
Assignees
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Type] Bug An existing feature does not function as intended

Comments

@fluiddot
Copy link
Contributor

fluiddot commented Jan 28, 2022

Description

In #38052 we identified that some act warnings were triggered after the test finishes, we managed to address them by assuring that all timers are run after the editor is initialized. However, I identified that these warnings can still be triggered if you have at least two tests that initialize the editor (check the below example).

Warning:

    Warning: An update to EditorProvider inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at EditorProvider (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/editor/src/components/provider/index.js:23:2)
        at /Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/editor/src/components/provider/with-registry-provider.js:22:5
        at WithRegistryProvider(EditorProvider)
        at NativeEditorProvider (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/editor/src/components/provider/index.native.js:70:16)
        at WithDispatch(NativeEditorProvider) (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/data/src/components/with-dispatch/index.js:95:26)
        at /Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/data/src/components/with-select/index.js:56:24
        at WithSelect(WithDispatch(NativeEditorProvider)) (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/compose/src/higher-order/pure/index.tsx:36:3)
        at SlotFillProvider (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/components/src/slot-fill/provider.js:18:16)
        at Editor (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/edit-post/src/editor.native.js:30:23)
        at WithDispatch(Editor) (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/data/src/components/with-dispatch/index.js:95:26)
        at /Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/data/src/components/with-select/index.js:56:24
        at WithSelect(WithDispatch(Editor)) (/Users/fluiddot/workspace/gutenberg-mobile/gutenberg/packages/compose/src/higher-order/pure/index.tsx:36:3)

Step-by-step reproduction instructions

  1. Create the following test file act-warnings.test.js and place it in packages/react-native-editor/src/test/act-warnings.test.js and include the code below:
/**
 * External dependencies
 */
import { initializeEditor } from 'test/helpers';

/**
 * WordPress dependencies
 */
import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';

beforeAll( () => {
	// Register all core blocks
	registerCoreBlocks();
} );

afterAll( () => {
	// Clean up registered blocks
	getBlockTypes().forEach( ( block ) => {
		unregisterBlockType( block.name );
	} );
} );

describe( 'Test act warnings', () => {
	it( 'test #1', () => {
		const { getByTestId } = initializeEditor();

		const blockList = getByTestId( 'block-list-wrapper' );
		expect( blockList ).toBeVisible();
	} );

	it( 'test #2', () => {
		const { getByTestId } = initializeEditor();

		const blockList = getByTestId( 'block-list-wrapper' );
		expect( blockList ).toBeVisible();
	} );
} );
  1. Run the following command npm run native test -- act-warnings.test.js
  2. Observe that the tests display the act warnings.

Expected behaviour

act warnings shouldn't be displayed when r tests.

Actual behaviour

act warnings are displayed when running tests.

Screenshots or screen recording (optional)

N/A

WordPress information

  • WordPress version: N/A
  • Gutenberg version: N/A
  • Are all plugins except Gutenberg deactivated? N/A
  • Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

  • Device: N/A
  • Operating system: N/A
  • WordPress app version: N/A
@fluiddot fluiddot added [Type] Bug An existing feature does not function as intended Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Jan 28, 2022
@fluiddot fluiddot self-assigned this Jan 28, 2022
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 28, 2022
@fluiddot fluiddot removed the [Status] In Progress Tracking issues with work in progress label Nov 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Type] Bug An existing feature does not function as intended
Projects
None yet
2 participants