ESLint: Add and enable eslint-plugin-jest-dom (#44983)

* ESLint: Enable eslint-plugin-jest-dom

* Fix a couple of false positives

.eslintrc.js

@@ -320,6 +320,11 @@ module.exports = {
 			excludedFiles: [ 'test/e2e/**/*.js' ],
 			extends: [ 'plugin:@wordpress/eslint-plugin/test-unit' ],
 		},
+		{
+			files: [ '**/test/**/*.js' ],
+			excludedFiles: [ '**/*.@(android|ios|native).js' ],
+			extends: [ 'plugin:jest-dom/recommended' ],
+		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
 			excludedFiles: [ 'packages/e2e-test-utils-playwright/**/*.js' ],

package.json

@@ -185,6 +185,7 @@
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.25.2",
+		"eslint-plugin-jest-dom": "4.0.2",
 		"eslint-plugin-playwright": "0.8.0",
 		"eslint-plugin-ssr-friendly": "1.0.6",
 		"execa": "4.0.2",

packages/components/src/ui/tooltip/test/index.js

@@ -37,14 +37,14 @@ describe( 'props', () => {
 				<Text>{ invisibleTooltipTriggerContent }</Text>
 			</Tooltip>
 		);
-		const tooltips = screen.getAllByRole( /tooltip/i );
+		const tooltip = screen.getByRole( /tooltip/i );
 		const invisibleTooltipTrigger = screen.getByText(
 			invisibleTooltipTriggerContent
 		);
-		// The invisible tooltip should not render.
-		expect( tooltips ).toHaveLength( 1 );
+		// The base tooltip should render only; invisible tooltip should not render.
+		expect( tooltip ).toBeInTheDocument();
 		// Assert that the rendered tooltip is indeed the base tooltip.
-		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
+		expect( tooltip.id ).toBe( baseTooltipId );
 		// But the invisible tooltip's trigger still should have rendered.
 		expect( invisibleTooltipTrigger ).not.toBeUndefined();
 	} );
@@ -70,9 +70,9 @@ describe( 'props', () => {
 				<Text>WordPress.org</Text>
 			</Tooltip>
 		);
-		const tooltips = screen.getAllByRole( /tooltip/i );
+		const tooltip = screen.getByRole( /tooltip/i );
 		// Assert only the base tooltip rendered.
-		expect( tooltips ).toHaveLength( 1 );
-		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
+		expect( tooltip ).toBeInTheDocument();
+		expect( tooltip.id ).toBe( baseTooltipId );
 	} );
 } );