diff --git a/packages/compose/src/hooks/use-merge-refs/test/index.js b/packages/compose/src/hooks/use-merge-refs/test/index.js
index fe73347b8e237..4c883ff97c608 100644
--- a/packages/compose/src/hooks/use-merge-refs/test/index.js
+++ b/packages/compose/src/hooks/use-merge-refs/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ describe( 'useMergeRefs', () => {
 
 	function MergedRefs( {
 		count,
-		tagName: TagName = 'div',
+		tagName: TagName = 'ul',
 		disable1,
 		disable2,
 		unused,
@@ -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.
@@ -104,7 +95,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: the initial callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -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
@@ -140,7 +129,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: the initial callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -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
@@ -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( [
@@ -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
@@ -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( [
@@ -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
@@ -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
@@ -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( [
@@ -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
@@ -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
@@ -320,7 +295,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: current callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -334,18 +309,16 @@ 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( [
@@ -353,7 +326,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( <MergedRefs unused />, rootElement );
+		rerender( <MergedRefs unused /> );
 
 		// Render 3: ref 2 should be updated with null
 		expect( renderCallback.history ).toEqual( [
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
deleted file mode 100644
index 7540e75611134..0000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
index 9c011e1cbc2a0..2b6e410a01d96 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
@@ -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
@@ -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();
 	} );
 } );