Skip to content

Use BlockEdit for block rendering unit tests #29442

@fluiddot

Description

@fluiddot

What problem does this address?

Currently the unit tests related to rendering blocks are using the edit component of the different blocks. However the blocks are rendered in the editor through the BlockEdit component which includes a context with different properties like clientID that could be required by other logic from the blocks.

In fact, I realised when testing the changes that will introduce this PR, that rendering blocks without a clientId produce errors when running the unit tests, in this case the selector isBlockSelected which is heavily used in blocks returns true when the clientId is undefined.

What is your proposed solution?

My solution here is to add extra logic to the unit tests that renders blocks, first we should register the block as the editor does and then create a function that returns the BlockEdit component that will render the block we want to test.

Here is an example:

/**
 * Internal dependencies
 */
import { metadata, settings, name } from '../index';

/**
 * WordPress dependencies
 */
import { BlockEdit } from '@wordpress/block-editor';
import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';

const Block = ( { clientId, ...props } ) => (
	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
);

describe( '<BLOCK_NAME> Block', () => {
	beforeAll( () => {
		registerBlockType( name, {
			...metadata,
			...settings,
		} );
	} );

	afterAll( () => {
		unregisterBlockType( name );
	} );

        it( 'renders without crashing', () => {
		const component = renderer.create(
			<Block />
		);
		const rendered = component.toJSON();
		expect( rendered ).toBeTruthy();
	} );
...
} );

As you can see, instead of rendering the Edit component of the block, we use the BlockEdit component by passing the block's name through the name prop and a default clientId.

Metadata

Metadata

Assignees

Labels

Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)[Status] In ProgressTracking issues with work in progress[Type] TaskIssues or PRs that have been broken down into an individual action to take

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions