feat: support shadow-dom-testing-library

src/rules/no-test-id-queries.ts

@@ -7,7 +7,12 @@ const RULE_NAME = 'no-test-id-queries';
 export type MessageIds = 'noTestIdQueries';
 type Options = [];
 
-const QUERIES_REGEX = `/^(${ALL_QUERIES_VARIANTS.join('|')})TestId$/`;
+const QUERY_VARIANTS = [
+	...ALL_QUERIES_VARIANTS,
+	...ALL_QUERIES_VARIANTS.map((query) => `${query}Shadow` as const),
+];
+
+const QUERIES_REGEX = `/^(${QUERY_VARIANTS.join('|')})TestId$/`;
 
 export default createTestingLibraryRule<Options, MessageIds>({
 	name: RULE_NAME,

src/utils/index.ts

@@ -28,6 +28,7 @@ const LIBRARY_MODULES = [
 	'@testing-library/vue',
 	'@testing-library/svelte',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ] as const;
 
 const USER_EVENT_MODULE = '@testing-library/user-event';
@@ -59,6 +60,15 @@ const ALL_QUERIES_METHODS = [
 	'ByDisplayValue',
 	'ByRole',
 	'ByTestId',
+	// queries coming from 'shadow-dom-testing-library'
+	'ByShadowLabelText',
+	'ByShadowPlaceholderText',
+	'ByShadowText',
+	'ByShadowAltText',
+	'ByShadowTitle',
+	'ByShadowDisplayValue',
+	'ByShadowRole',
+	'ByShadowTestId',
 ] as const;
 
 const SYNC_QUERIES_COMBINATIONS = combineQueries(
@@ -157,27 +167,27 @@ const PRESENCE_MATCHERS = [
 const ABSENCE_MATCHERS = ['toBeNull', 'toBeFalsy'] as const;
 
 export {
-	combineQueries,
-	getDocsUrl,
-	SYNC_QUERIES_VARIANTS,
-	ASYNC_QUERIES_VARIANTS,
-	ALL_QUERIES_VARIANTS,
+	ABSENCE_MATCHERS,
+	ALL_QUERIES_COMBINATIONS,
 	ALL_QUERIES_METHODS,
-	SYNC_QUERIES_COMBINATIONS,
+	ALL_QUERIES_VARIANTS,
+	ALL_RETURNING_NODES,
 	ASYNC_QUERIES_COMBINATIONS,
-	ALL_QUERIES_COMBINATIONS,
+	ASYNC_QUERIES_VARIANTS,
 	ASYNC_UTILS,
+	combineQueries,
 	DEBUG_UTILS,
+	EVENT_HANDLER_METHODS,
 	EVENTS_SIMULATORS,
-	TESTING_FRAMEWORK_SETUP_HOOKS,
+	getDocsUrl,
 	LIBRARY_MODULES,
-	PROPERTIES_RETURNING_NODES,
 	METHODS_RETURNING_NODES,
-	ALL_RETURNING_NODES,
+	OLD_LIBRARY_MODULES,
 	PRESENCE_MATCHERS,
-	ABSENCE_MATCHERS,
-	EVENT_HANDLER_METHODS,
+	PROPERTIES_RETURNING_NODES,
+	SYNC_QUERIES_COMBINATIONS,
+	SYNC_QUERIES_VARIANTS,
+	TESTING_FRAMEWORK_SETUP_HOOKS,
 	USER_EVENT_METHODS,
 	USER_EVENT_MODULE,
-	OLD_LIBRARY_MODULES,
 };

tests/rules/await-async-queries.test.ts

@@ -25,6 +25,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 interface TestCode {
@@ -121,6 +122,11 @@ ruleTester.run(rule.name, rule, {
 			testingFramework: '@marko/testing-library',
 		}),
 
+		// async shadow-dom-testing-library screen queries declaration are valid
+		...createTestCase((query) => `await screen.${query}('foo')`, {
+			testingFramework: 'shadow-dom-testing-library',
+		}),
+
 		// async queries not called are valid
 		...createTestCase((query) => `expect(screen.${query}).toBeDefined()`, {
 			isAsync: false,

tests/rules/await-async-utils.test.ts

@@ -19,6 +19,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	// 'shadow-dom-testing-library', does not export waitFor and waitForElementToBeRemoved utils, so not relevant to this rule
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/no-container.test.ts

@@ -8,6 +8,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/no-debugging-utils.test.ts

@@ -8,6 +8,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/no-node-access.test.ts

@@ -18,6 +18,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/no-render-in-lifecycle.test.ts

@@ -9,6 +9,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/no-test-id-queries.test.ts

@@ -9,6 +9,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 const QUERIES = [
@@ -20,6 +21,47 @@ const QUERIES = [
 	'findAllByTestId',
 ];
 
+const createInvalidTestCase = (framework: string, query: string) => {
+	return [
+		{
+			code: `
+					import { render } from '${framework}';
+
+					test('test', async () => {
+						const { ${query} } = render(<MyComponent />);
+
+						expect(${query}('my-test-id')).toBeInTheDocument();
+					});
+				`,
+			errors: [
+				{
+					messageId: 'noTestIdQueries',
+					line: 7,
+					column: 14,
+				},
+			],
+		},
+		{
+			code: `
+					import { render, screen } from '${framework}';
+
+					test('test', async () => {
+						render(<MyComponent />);
+
+						expect(screen.${query}('my-test-id')).toBeInTheDocument();
+					});
+				`,
+			errors: [
+				{
+					messageId: 'noTestIdQueries',
+					line: 7,
+					column: 14,
+				},
+			],
+		},
+	] as const;
+};
+
 ruleTester.run(rule.name, rule, {
 	valid: [
 		`
@@ -43,44 +85,20 @@ ruleTester.run(rule.name, rule, {
 		`,
 	],
 
-	invalid: SUPPORTED_TESTING_FRAMEWORKS.flatMap((framework) =>
-		QUERIES.flatMap((query) => [
-			{
-				code: `
-					import { render } from '${framework}';
-
-					test('test', async () => {
-						const { ${query} } = render(<MyComponent />);
-
-						expect(${query}('my-test-id')).toBeInTheDocument();
-					});
-				`,
-				errors: [
-					{
-						messageId: 'noTestIdQueries',
-						line: 7,
-						column: 14,
-					},
-				],
-			},
-			{
-				code: `
-					import { render, screen } from '${framework}';
-
-					test('test', async () => {
-						render(<MyComponent />);
-
-						expect(screen.${query}('my-test-id')).toBeInTheDocument();
-					});
-				`,
-				errors: [
-					{
-						messageId: 'noTestIdQueries',
-						line: 7,
-						column: 14,
-					},
-				],
-			},
-		])
-	),
+	invalid: [
+		...SUPPORTED_TESTING_FRAMEWORKS.flatMap((framework) =>
+			QUERIES.flatMap((query) => createInvalidTestCase(framework, query))
+		),
+		// special cases for shadow-dom-testing-library
+		...[
+			'getByShadowTestId',
+			'queryByShadowTestId',
+			'getAllByShadowTestId',
+			'queryAllByShadowTestId',
+			'findByShadowTestId',
+			'findAllByShadowTestId',
+		].flatMap((query) =>
+			createInvalidTestCase('shadow-dom-testing-library', query)
+		),
+	],
 });

tests/rules/prefer-find-by.test.ts

@@ -19,6 +19,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 function buildFindByMethod(queryMethod: string) {

tests/rules/prefer-query-by-disappearance.test.ts

@@ -9,6 +9,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 ruleTester.run(rule.name, rule, {

tests/rules/prefer-screen-queries.test.ts

@@ -14,6 +14,7 @@ const SUPPORTED_TESTING_FRAMEWORKS = [
 	'@testing-library/react',
 	'@testing-library/vue',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ];
 
 const CUSTOM_QUERY_COMBINATIONS = combineQueries(ALL_QUERIES_VARIANTS, [

tests/utils/is-testing-library-module.test.ts

@@ -1,4 +1,4 @@
-import { it, expect, describe } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import {
 	isCustomTestingLibraryModule,
@@ -20,6 +20,7 @@ const LIBRARY_MODULES = [
 	'@testing-library/vue',
 	'@testing-library/svelte',
 	'@marko/testing-library',
+	'shadow-dom-testing-library',
 ] as const;
 
 const USER_EVENT_MODULE = '@testing-library/user-event';