fix(consistent-data-testid): avoid crash for filename with square brackets (#643)

fix: consistent-data-testid crashing when square brackets are in filename

fileName placeholder will be replaced with an empty string, as dynamic routes cannot be defined

Closes #509

Author: sjarva

docs/rules/consistent-data-testid.md

@@ -28,10 +28,10 @@ const baz = (props) => <div>...</div>;
 
 ## Options
 
-| Option            | Required | Default       | Details                                                                                                                                                                                                                                                                       | Example                                               |
-| ----------------- | -------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
-| `testIdPattern`   | Yes      | None          | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js`                 | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$`                |
-| `testIdAttribute` | No       | `data-testid` | A string (or array of strings) used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid) | `data-my-test-attribute`, `["data-testid", "testId"]` |
+| Option            | Required | Default       | Details                                                                                                                                                                                                                                                                                                                                                                               | Example                                               |
+| ----------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `testIdPattern`   | Yes      | None          | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js` OR empty string in the case of dynamically changing routes (that contain square brackets) with `Gatsby.js` or `Next.js` | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$`                |
+| `testIdAttribute` | No       | `data-testid` | A string (or array of strings) used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid)                                                                                                         | `data-my-test-attribute`, `["data-testid", "testId"]` |
 
 ## Example
 
@@ -56,3 +56,7 @@ const baz = (props) => <div>...</div>;
 	]
 }
 ```
+
+## Notes
+
+- If you are using Gatsby.js's [client-only routes](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#syntax-client-only-routes) or Next.js's [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes) and therefore have square brackets (`[]`) in the filename (e.g. `../path/to/[component].js`), the `{fileName}` placeholder will be replaced with an empty string. This is because a linter cannot know what the dynamic content will be at run time.

lib/rules/consistent-data-testid.ts

@@ -74,6 +74,12 @@ export default createTestingLibraryRule<Options, MessageIds>({
 		function getFileNameData() {
 			const splitPath = getFilename().split('/');
 			const fileNameWithExtension = splitPath.pop() ?? '';
+			if (
+				fileNameWithExtension.includes('[') ||
+				fileNameWithExtension.includes(']')
+			) {
+				return { fileName: undefined };
+			}
 			const parent = splitPath.pop();
 			const fileName = fileNameWithExtension.split('.').shift();
 

tests/lib/rules/consistent-data-testid.test.ts

@@ -200,6 +200,67 @@ const validTestCases: ValidTestCase[] = [
         `,
 		options: [{ testIdPattern: 'somethingElse' }],
 	},
+	// To fix issue 509, https://github.com/testing-library/eslint-plugin-testing-library/issues/509
+	// Gatsby.js ja Next.js use square brackets in filenames to create dynamic routes
+	{
+		code: `
+            import React from 'react';
+            
+            const TestComponent = props => {
+              return (
+                <div data-testid="__CoolStuff">
+                  Hello
+                </div>
+              )
+            };
+          `,
+		options: [
+			{
+				testIdPattern: '^{fileName}(__([A-Z]+[a-z]*?)+)*$',
+			},
+		],
+		filename: '/my/cool/file/path/[client-only].js',
+	},
+	{
+		code: `
+            import React from 'react';
+            
+            const TestComponent = props => {
+              return (
+                <div data-testid="__CoolStuff">
+                  Hello
+                </div>
+              )
+            };
+          `,
+		options: [
+			{
+				// should work if given the {fileName} placeholder
+				testIdPattern: '^{fileName}(__([A-Z]+[a-z]*?)+)*$',
+			},
+		],
+		filename: '/my/cool/file/path/[...wildcard].js',
+	},
+	{
+		code: `
+            import React from 'react';
+            
+            const TestComponent = props => {
+              return (
+                <div data-testid="__CoolStuff">
+                  Hello
+                </div>
+              )
+            };
+          `,
+		options: [
+			{
+				// should work also if not given the {fileName} placeholder
+				testIdPattern: '^(__([A-Z]+[a-z]*?)+)*$',
+			},
+		],
+		filename: '/my/cool/file/path/[...wildcard].js',
+	},
 ];
 const invalidTestCases: InvalidTestCase[] = [
 	{