Editor: Refactor ThemeSupportCheck tests to @testing-library/react (#…

…43532)
WordPress · Aug 24, 2022 · 69d8360 · 69d8360
1 parent e9b4be2
commit 69d8360
Showing 1 changed file with 13 additions and 15 deletions.
diff --git a/packages/editor/src/components/theme-support-check/test/index.js b/packages/editor/src/components/theme-support-check/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,34 +10,32 @@ import { ThemeSupportCheck } from '../index';
 
 describe( 'ThemeSupportCheck', () => {
 	it( "should not render if there's no support check provided", () => {
-		const wrapper = shallow(
-			<ThemeSupportCheck>foobar</ThemeSupportCheck>
-		);
-		expect( wrapper.type() ).toBe( null );
+		render( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if post-thumbnails are supported', () => {
 		const themeSupports = {
 			'post-thumbnails': true,
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				themeSupports={ themeSupports }
 			>
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'foobar' ) ).toBeVisible();
 	} );
 
 	it( 'should render if post-thumbnails are supported for the post type', () => {
 		const themeSupports = {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ 'post' }
@@ -46,15 +44,15 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'foobar' ) ).toBeVisible();
 	} );
 
 	it( "should not render if post-thumbnails aren't supported for the post type", () => {
 		const themeSupports = {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ 'page' }
@@ -63,15 +61,15 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render if post-thumbnails is limited and false is passed for postType', () => {
 		const themeSupports = {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ false }
@@ -80,22 +78,22 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render if theme doesn't support post-thumbnails", () => {
 		const themeSupports = {
 			'post-thumbnails': false,
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				themeSupports={ themeSupports }
 			>
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 } );