diff --git a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
index d8bfef8771b878..c297bad15f29ea 100644
--- a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,46 +9,44 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import { BlockModeToggle } from '../block-mode-toggle';
 
 describe( 'BlockModeToggle', () => {
-	function getShallowRenderOutput( element ) {
-		const renderer = new ShallowRenderer();
-		renderer.render( element );
-		return renderer.getRenderOutput();
-	}
-
 	it( "should not render the HTML mode button if the block doesn't support it", () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle blockType={ { supports: { html: false } } } />
 		);
 
-		expect( wrapper ).toBe( null );
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'Edit as HTML' } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render the HTML mode button', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="visual"
 			/>
 		);
-		const text = wrapper.props.children;
 
-		expect( text ).toEqual( 'Edit as HTML' );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'Edit as HTML' } )
+		).toBeVisible();
 	} );
 
 	it( 'should render the Visual mode button', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="html"
 			/>
 		);
-		const text = wrapper.props.children;
 
-		expect( text ).toEqual( 'Edit visually' );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'Edit visually' } )
+		).toBeVisible();
 	} );
 
 	it( 'should not render the Visual mode button if code editing is disabled', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="html"
@@ -56,6 +54,8 @@ describe( 'BlockModeToggle', () => {
 			/>
 		);
 
-		expect( wrapper ).toBe( null );
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'Edit visually' } )
+		).not.toBeInTheDocument();
 	} );
 } );