feat(no-await-sync-queries): add auto-fix

README.md

@@ -299,7 +299,7 @@ module.exports = [
 | [await-async-utils](docs/rules/await-async-utils.md)                             | Enforce promises from async utils to be awaited properly                                     | ![badge-angular][] ![badge-dom][] ![badge-marko][] ![badge-react][] ![badge-vue][] |                                                                     |     |
 | [consistent-data-testid](docs/rules/consistent-data-testid.md)                   | Ensures consistent usage of `data-testid`                                                    |                                                                                    |                                                                     |     |
 | [no-await-sync-events](docs/rules/no-await-sync-events.md)                       | Disallow unnecessary `await` for sync events                                                 | ![badge-angular][] ![badge-dom][] ![badge-react][]                                 |                                                                     |     |
-| [no-await-sync-queries](docs/rules/no-await-sync-queries.md)                     | Disallow unnecessary `await` for sync queries                                                | ![badge-angular][] ![badge-dom][] ![badge-marko][] ![badge-react][] ![badge-vue][] |                                                                     |     |
+| [no-await-sync-queries](docs/rules/no-await-sync-queries.md)                     | Disallow unnecessary `await` for sync queries                                                | ![badge-angular][] ![badge-dom][] ![badge-marko][] ![badge-react][] ![badge-vue][] |                                                                     | 🔧  |
 | [no-container](docs/rules/no-container.md)                                       | Disallow the use of `container` methods                                                      | ![badge-angular][] ![badge-marko][] ![badge-react][] ![badge-vue][]                |                                                                     |     |
 | [no-debugging-utils](docs/rules/no-debugging-utils.md)                           | Disallow the use of debugging utilities like `debug`                                         |                                                                                    | ![badge-angular][] ![badge-marko][] ![badge-react][] ![badge-vue][] |     |
 | [no-dom-import](docs/rules/no-dom-import.md)                                     | Disallow importing from DOM Testing Library                                                  | ![badge-angular][] ![badge-marko][] ![badge-react][] ![badge-vue][]                |                                                                     | 🔧  |

docs/rules/no-await-sync-queries.md

@@ -2,6 +2,8 @@
 
 💼 This rule is enabled in the following configs: `angular`, `dom`, `marko`, `react`, `vue`.
 
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
 <!-- end auto-generated rule header -->
 
 Ensure that sync queries are not awaited unnecessarily.

lib/rules/no-await-sync-queries.ts

@@ -1,4 +1,4 @@
-import { TSESTree } from '@typescript-eslint/utils';
+import { ASTUtils, TSESTree } from '@typescript-eslint/utils';
 
 import { createTestingLibraryRule } from '../create-testing-library-rule';
 import { getDeepestIdentifierNode } from '../node-utils';
@@ -26,15 +26,20 @@ export default createTestingLibraryRule<Options, MessageIds>({
 				'`{{ name }}` query is sync so it does not need to be awaited',
 		},
 		schema: [],
+		fixable: 'code',
 	},
 	defaultOptions: [],
 
 	create(context, _, helpers) {
 		return {
 			'AwaitExpression > CallExpression'(node: TSESTree.CallExpression) {
+				const awaitExpression = node.parent;
 				const deepestIdentifierNode = getDeepestIdentifierNode(node);
 
-				if (!deepestIdentifierNode) {
+				if (
+					!ASTUtils.isAwaitExpression(awaitExpression) ||
+					!deepestIdentifierNode
+				) {
 					return;
 				}
 
@@ -45,6 +50,15 @@ export default createTestingLibraryRule<Options, MessageIds>({
 						data: {
 							name: deepestIdentifierNode.name,
 						},
+						fix: (fixer) => {
+							const awaitRangeStart = awaitExpression.range[0];
+							const awaitRangeEnd = awaitExpression.range[0] + 'await'.length;
+
+							return fixer.replaceTextRange(
+								[awaitRangeStart, awaitRangeEnd],
+								''
+							);
+						},
 					});
 				}
 			},

tests/lib/rules/no-await-sync-queries.test.ts

@@ -142,6 +142,10 @@ ruleTester.run(RULE_NAME, rule, {
 							column: 31,
 						},
 					],
+					output: `async () => {
+        const element =  ${query}('foo')
+      }
+      `,
 				}) as const
 		),
 		// custom sync queries with await operator are not valid
@@ -152,6 +156,24 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 31 }],
+			output: `
+      async () => {
+        const element =  getByIcon('search')
+      }
+      `,
+		},
+		{
+			code: `
+      async () => {
+        const element = await(getByIcon('search'))
+      }
+      `,
+			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 31 }],
+			output: `
+      async () => {
+        const element = (getByIcon('search'))
+      }
+      `,
 		},
 		{
 			code: `
@@ -160,6 +182,11 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 31 }],
+			output: `
+      async () => {
+        const element =  queryByIcon('search')
+      }
+      `,
 		},
 		{
 			code: `
@@ -168,6 +195,11 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 38 }],
+			output: `
+      async () => {
+        const element =  screen.getAllByIcon('search')
+      }
+      `,
 		},
 		{
 			code: `
@@ -176,6 +208,11 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 38 }],
+			output: `
+      async () => {
+        const element =  screen.queryAllByIcon('search')
+      }
+      `,
 		},
 		// sync queries with await operator inside assert are not valid
 		...SYNC_QUERIES_COMBINATIONS.map(
@@ -192,6 +229,10 @@ ruleTester.run(RULE_NAME, rule, {
 							column: 22,
 						},
 					],
+					output: `async () => {
+        expect( ${query}('foo')).toBeEnabled()
+      }
+      `,
 				}) as const
 		),
 
@@ -210,6 +251,10 @@ ruleTester.run(RULE_NAME, rule, {
 							column: 38,
 						},
 					],
+					output: `async () => {
+        const element =  screen.${query}('foo')
+      }
+      `,
 				}) as const
 		),
 
@@ -228,6 +273,10 @@ ruleTester.run(RULE_NAME, rule, {
 							column: 29,
 						},
 					],
+					output: `async () => {
+        expect( screen.${query}('foo')).toBeEnabled()
+      }
+      `,
 				}) as const
 		),
 
@@ -244,6 +293,12 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 					errors: [{ messageId: 'noAwaitSyncQuery', line: 4, column: 38 }],
+					output: `
+      import { screen } from '${testingFramework}'
+      () => {
+        const element =  screen.getByRole('button')
+      }
+      `,
 				}) as const
 		),
 		// sync query awaited and related to custom module is not valid
@@ -256,6 +311,12 @@ ruleTester.run(RULE_NAME, rule, {
       }
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 4, column: 38 }],
+			output: `
+      import { screen } from 'test-utils'
+      () => {
+        const element =  screen.getByRole('button')
+      }
+      `,
 		},
 
 		// awaited custom sync query matching custom-queries setting is invalid
@@ -269,6 +330,11 @@ ruleTester.run(RULE_NAME, rule, {
       })
       `,
 			errors: [{ messageId: 'noAwaitSyncQuery', line: 3, column: 31 }],
+			output: `
+      test('A valid example test', async () => {
+        const element =  queryByIcon('search')
+      })
+      `,
 		},
 	],
 });