Skip to content

Commit

Permalink
Unit Tests: rewrite ReactDOM.render usages to RTL (#45453)
Browse files Browse the repository at this point in the history 
* useMergeRefs: rewrite unit tests to Testing Library

* PluginPrePublishPanel: rewrite unit tests to Testing Library

* Replace rerender(null) with unmount()

* Use screen.getByRole

* Check panel rendering by looking up the title element, avoid snapshots

* use .toBeVisible()
  • Loading branch information
@jsnajdr
jsnajdr authored Nov 3, 2022
1 parent d7e2d9a commit 220e995
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 72 deletions.
99 changes: 36 additions & 63 deletions packages/compose/src/hooks/use-merge-refs/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import ReactDOM from 'react-dom';
import { render, screen } from '@testing-library/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -38,7 +38,7 @@ describe( 'useMergeRefs', () => {

function MergedRefs( {
count,
tagName: TagName = 'div',
tagName: TagName = 'ul',
disable1,
disable2,
unused,
Expand Down Expand Up @@ -71,31 +71,22 @@ describe( 'useMergeRefs', () => {
return <TagName ref={ mergedRefs } />;
}

beforeEach( () => {
const rootElement = document.createElement( 'div' );
rootElement.id = 'root';
document.body.appendChild( rootElement );
} );

afterEach( () => {
// Reset all history and DOM.
// Reset all history.
renderCallback.history = [];
document.body.innerHTML = '';
} );

it( 'should work', () => {
const rootElement = document.getElementById( 'root' );

ReactDOM.render( <MergedRefs />, rootElement );
const { rerender, unmount } = render( <MergedRefs /> );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

// Render 1: both initial callback functions should be called with node.
expect( renderCallback.history ).toEqual( [
[ [ originalElement ], [ originalElement ] ],
] );

ReactDOM.render( <MergedRefs />, rootElement );
rerender( <MergedRefs /> );

// Render 2: the new callback functions should not be called! There has
// been no dependency change.
Expand All @@ -104,7 +95,7 @@ describe( 'useMergeRefs', () => {
[ [], [] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: the initial callback functions should receive null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -117,15 +108,13 @@ describe( 'useMergeRefs', () => {
} );

it( 'should work for node change', () => {
const rootElement = document.getElementById( 'root' );
const { rerender, unmount } = render( <MergedRefs /> );

ReactDOM.render( <MergedRefs />, rootElement );
const originalElement = screen.getByRole( 'list' );

const originalElement = rootElement.firstElementChild;
rerender( <MergedRefs tagName="button" /> );

ReactDOM.render( <MergedRefs tagName="button" />, rootElement );

const newElement = rootElement.firstElementChild;
const newElement = screen.getByRole( 'button' );

// After a render with the original element and a second render with the
// new element, expect the initial callback functions to be called with
Expand All @@ -140,7 +129,7 @@ describe( 'useMergeRefs', () => {
[ [], [] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: the initial callback functions should receive null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -153,17 +142,15 @@ describe( 'useMergeRefs', () => {
} );

it( 'should work with dependencies', () => {
const rootElement = document.getElementById( 'root' );

ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );
const { rerender, unmount } = render( <MergedRefs count={ 1 } /> );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

expect( renderCallback.history ).toEqual( [
[ [ originalElement ], [ originalElement ] ],
] );

ReactDOM.render( <MergedRefs count={ 2 } />, rootElement );
rerender( <MergedRefs count={ 2 } /> );

// After a second render with a dependency change, expect the inital
// callback function to be called with null and the new callback
Expand All @@ -174,7 +161,7 @@ describe( 'useMergeRefs', () => {
[ [], [ originalElement ] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: current callback functions should be called with null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -187,22 +174,17 @@ describe( 'useMergeRefs', () => {
} );

it( 'should simultaneously update node and dependencies', () => {
const rootElement = document.getElementById( 'root' );
const { rerender, unmount } = render( <MergedRefs count={ 1 } /> );

ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

expect( renderCallback.history ).toEqual( [
[ [ originalElement ], [ originalElement ] ],
] );

ReactDOM.render(
<MergedRefs count={ 2 } tagName="button" />,
rootElement
);
rerender( <MergedRefs count={ 2 } tagName="button" /> );

const newElement = rootElement.firstElementChild;
const newElement = screen.getByRole( 'button' );

// Both the node changes and the dependencies update for the second
// callback, so expect the old callback function to be called with null
Expand All @@ -217,7 +199,7 @@ describe( 'useMergeRefs', () => {
[ [], [ newElement ] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: current callback functions should be called with null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -230,15 +212,13 @@ describe( 'useMergeRefs', () => {
} );

it( 'should work for dependency change after node change', () => {
const rootElement = document.getElementById( 'root' );

ReactDOM.render( <MergedRefs />, rootElement );
const { rerender, unmount } = render( <MergedRefs /> );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

ReactDOM.render( <MergedRefs tagName="button" />, rootElement );
rerender( <MergedRefs tagName="button" /> );

const newElement = rootElement.firstElementChild;
const newElement = screen.getByRole( 'button' );

// After a render with the original element and a second render with the
// new element, expect the initial callback functions to be called with
Expand All @@ -253,10 +233,7 @@ describe( 'useMergeRefs', () => {
[ [], [] ],
] );

ReactDOM.render(
<MergedRefs tagName="button" count={ 1 } />,
rootElement
);
rerender( <MergedRefs tagName="button" count={ 1 } /> );

// After a third render with a dependency change, expect the inital
// callback function to be called with null and the new callback
Expand All @@ -271,7 +248,7 @@ describe( 'useMergeRefs', () => {
[ [], [ newElement ] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: current callback functions should be called with null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -285,18 +262,16 @@ describe( 'useMergeRefs', () => {
} );

it( 'should allow disabling a ref', () => {
const rootElement = document.getElementById( 'root' );
const { rerender, unmount } = render( <MergedRefs disable1 /> );

ReactDOM.render( <MergedRefs disable1 />, rootElement );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

// Render 1: ref 1 should be disabled.
expect( renderCallback.history ).toEqual( [
[ [], [ originalElement ] ],
] );

ReactDOM.render( <MergedRefs disable2 />, rootElement );
rerender( <MergedRefs disable2 /> );

// Render 2: ref 1 should be enabled and receive the ref. Note that the
// callback hasn't changed, so the original callback function will be
Expand All @@ -306,7 +281,7 @@ describe( 'useMergeRefs', () => {
[ [], [] ],
] );

ReactDOM.render( <MergedRefs disable1 count={ 1 } />, rootElement );
rerender( <MergedRefs disable1 count={ 1 } /> );

// Render 3: ref 1 should again be disabled. Ref 2 to should receive a
// ref with the new callback function because the count has been
Expand All @@ -320,7 +295,7 @@ describe( 'useMergeRefs', () => {
[ [], [ originalElement ] ],
] );

ReactDOM.render( null, rootElement );
unmount();

// Unmount: current callback functions should receive null.
expect( renderCallback.history ).toEqual( [
Expand All @@ -334,26 +309,24 @@ describe( 'useMergeRefs', () => {
} );

it( 'should allow the hook being unused', () => {
const rootElement = document.getElementById( 'root' );

ReactDOM.render( <MergedRefs unused />, rootElement );
const { rerender } = render( <MergedRefs unused /> );

const originalElement = rootElement.firstElementChild;
const originalElement = screen.getByRole( 'list' );

// Render 1: ref 1 should updated, ref 2 should not.
expect( renderCallback.history ).toEqual( [
[ [ originalElement ], [] ],
] );

ReactDOM.render( <MergedRefs />, rootElement );
rerender( <MergedRefs /> );

// Render 2: ref 2 should be updated as well.
expect( renderCallback.history ).toEqual( [
[ [ originalElement, null, originalElement ], [ originalElement ] ],
[ [], [] ],
] );

ReactDOM.render( <MergedRefs unused />, rootElement );
rerender( <MergedRefs unused /> );

// Render 3: ref 2 should be updated with null
expect( renderCallback.history ).toEqual( [
Expand Down
3 changes: 0 additions & 3 deletions ...dit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
View file

This file was deleted.

14 changes: 8 additions & 6 deletions packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
/**
* External dependencies
*/
import { render, screen } from '@testing-library/react';

/**
* WordPress dependencies
*/
import { SlotFillProvider } from '@wordpress/components';
import { render } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -11,21 +15,19 @@ import PluginPrePublishPanel from '../';

describe( 'PluginPrePublishPanel', () => {
test( 'renders fill properly', () => {
const div = document.createElement( 'div' );
render(
<SlotFillProvider>
<PluginPrePublishPanel
className="my-plugin-pre-publish-panel"
title="My panel title"
initialOpen={ true }
initialOpen
>
My panel content
</PluginPrePublishPanel>
<PluginPrePublishPanel.Slot />
</SlotFillProvider>,
div
</SlotFillProvider>
);

expect( div.innerHTML ).toMatchSnapshot();
expect( screen.getByText( 'My panel title' ) ).toBeVisible();
} );
} );

0 comments on commit 220e995

Please sign in to comment.