ESLint: Add and enable eslint-plugin-testing-library (#45103)

* ESLint: Add and enable eslint-plugin-testing-library

* Intentionally ignore some rules

* Fix a leftover render-result-naming-convention violation

* Intentionally ignore an act() call

* Make no-container and no-node-access warnings instead of errors

* Disable no-container and no-node-access

.eslintrc.js

@@ -324,8 +324,19 @@ module.exports = {
 		},
 		{
 			files: [ '**/test/**/*.js' ],
-			excludedFiles: [ '**/*.@(android|ios|native).js' ],
-			extends: [ 'plugin:jest-dom/recommended' ],
+			excludedFiles: [
+				'**/*.@(android|ios|native).js',
+				'packages/react-native-*/**/*.js',
+				'test/native/**/*.js',
+			],
+			extends: [
+				'plugin:jest-dom/recommended',
+				'plugin:testing-library/react',
+			],
+			rules: {
+				'testing-library/no-container': 'off',
+				'testing-library/no-node-access': 'off',
+			},
 		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],

package.json

@@ -188,6 +188,7 @@
 		"eslint-plugin-jest-dom": "4.0.2",
 		"eslint-plugin-playwright": "0.8.0",
 		"eslint-plugin-ssr-friendly": "1.0.6",
+		"eslint-plugin-testing-library": "5.7.2",
 		"execa": "4.0.2",
 		"fast-glob": "3.2.7",
 		"filenamify": "4.2.0",

packages/block-editor/src/components/inner-blocks/test/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * WordPress dependencies
  */
@@ -102,3 +104,5 @@ describe( 'InnerBlocks', () => {
 		expect( serialize( block ) ).toMatchSnapshot();
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */

packages/blocks/src/api/test/children.js

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * WordPress dependencies
  */
@@ -137,3 +139,5 @@ describe( 'fromDOM', () => {
 		] );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */

packages/components/src/sandbox/test/index.js

@@ -39,9 +39,9 @@ describe( 'Sandbox', () => {
 	};
 
 	it( 'should rerender with new emdeded content if html prop changes', () => {
-		const result = render( <TestWrapper /> );
+		const { container } = render( <TestWrapper /> );
 
-		const iframe = result.container.querySelector( '.components-sandbox' );
+		const iframe = container.querySelector( '.components-sandbox' );
 
 		let sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );

packages/data/src/components/with-select/test/index.js

@@ -584,6 +584,8 @@ describe( 'withSelect', () => {
 		expect( ChildOriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( ParentOriginalComponent ).toHaveBeenCalledTimes( 1 );
 
+		// This is intentionally wrapped in an `act()` call.
+		// eslint-disable-next-line testing-library/no-unnecessary-act
 		await act( async () => {
 			registry.dispatch( 'childRender' ).toggleRender();
 		} );

packages/element/src/test/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * Internal dependencies
  */
@@ -127,3 +129,5 @@ describe( 'element', () => {
 		} );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */

packages/element/src/test/serialize.js

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * Internal dependencies
  */
@@ -717,3 +719,5 @@ describe( 'renderStyle()', () => {
 		} );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */