fix: flag unhandled async methods called from setup() return value

Author: puglyfe

lib/create-testing-library-rule/detect-testing-library-utils.ts

@@ -73,7 +73,10 @@ type IsAsyncUtilFn = (
 	validNames?: readonly (typeof ASYNC_UTILS)[number][]
 ) => boolean;
 type IsFireEventMethodFn = (node: TSESTree.Identifier) => boolean;
-type IsUserEventMethodFn = (node: TSESTree.Identifier) => boolean;
+type IsUserEventMethodFn = (
+	node: TSESTree.Identifier,
+	userEventSetupVars?: Set<string>
+) => boolean;
 type IsRenderUtilFn = (node: TSESTree.Identifier) => boolean;
 type IsCreateEventUtil = (
 	node: TSESTree.CallExpression | TSESTree.Identifier
@@ -558,7 +561,10 @@ export function detectTestingLibraryUtils<
 			return regularCall || wildcardCall || wildcardCallWithCallExpression;
 		};
 
-		const isUserEventMethod: IsUserEventMethodFn = (node) => {
+		const isUserEventMethod: IsUserEventMethodFn = (
+			node,
+			userEventSetupVars
+		) => {
 			const userEvent = findImportedUserEventSpecifier();
 			let userEventName: string | undefined;
 
@@ -568,10 +574,6 @@ export function detectTestingLibraryUtils<
 				userEventName = USER_EVENT_NAME;
 			}
 
-			if (!userEventName) {
-				return false;
-			}
-
 			const parentMemberExpression: TSESTree.MemberExpression | undefined =
 				node.parent && isMemberExpression(node.parent)
 					? node.parent
@@ -583,18 +585,33 @@ export function detectTestingLibraryUtils<
 
 			// make sure that given node it's not userEvent object itself
 			if (
-				[userEventName, USER_EVENT_NAME].includes(node.name) ||
+				(userEventName &&
+					[userEventName, USER_EVENT_NAME].includes(node.name)) ||
 				(ASTUtils.isIdentifier(parentMemberExpression.object) &&
 					parentMemberExpression.object.name === node.name)
 			) {
 				return false;
 			}
 
-			// check userEvent.click() usage
-			return (
+			// check userEvent.click() usage (imported identifier)
+			if (
+				userEventName &&
 				ASTUtils.isIdentifier(parentMemberExpression.object) &&
 				parentMemberExpression.object.name === userEventName
-			);
+			) {
+				return true;
+			}
+
+			// check user.click() usage where user is a variable from userEvent.setup()
+			if (
+				userEventSetupVars &&
+				ASTUtils.isIdentifier(parentMemberExpression.object) &&
+				userEventSetupVars.has(parentMemberExpression.object.name)
+			) {
+				return true;
+			}
+
+			return false;
 		};
 
 		/**

lib/rules/await-async-events.ts

@@ -1,4 +1,9 @@
-import { ASTUtils, TSESLint, TSESTree } from '@typescript-eslint/utils';
+import {
+	AST_NODE_TYPES,
+	ASTUtils,
+	TSESLint,
+	TSESTree,
+} from '@typescript-eslint/utils';
 
 import { createTestingLibraryRule } from '../create-testing-library-rule';
 import {
@@ -81,6 +86,9 @@ export default createTestingLibraryRule<Options, MessageIds>({
 	create(context, [options], helpers) {
 		const functionWrappersNames: string[] = [];
 
+		// Track variables assigned from userEvent.setup()
+		const userEventSetupVars = new Set<string>();
+
 		function reportUnhandledNode({
 			node,
 			closestCallExpression,
@@ -118,10 +126,28 @@ export default createTestingLibraryRule<Options, MessageIds>({
 		const isUserEventEnabled = eventModules.includes(USER_EVENT_NAME);
 
 		return {
+			// Track variables assigned from userEvent.setup()
+			VariableDeclarator(node: TSESTree.VariableDeclarator) {
+				if (
+					isUserEventEnabled &&
+					node.init &&
+					node.init.type === AST_NODE_TYPES.CallExpression &&
+					node.init.callee.type === AST_NODE_TYPES.MemberExpression &&
+					node.init.callee.object.type === AST_NODE_TYPES.Identifier &&
+					node.init.callee.object.name === USER_EVENT_NAME &&
+					node.init.callee.property.type === AST_NODE_TYPES.Identifier &&
+					node.init.callee.property.name === USER_EVENT_SETUP_FUNCTION_NAME &&
+					node.id.type === AST_NODE_TYPES.Identifier
+				) {
+					userEventSetupVars.add(node.id.name);
+				}
+			},
+
 			'CallExpression Identifier'(node: TSESTree.Identifier) {
 				if (
 					(isFireEventEnabled && helpers.isFireEventMethod(node)) ||
-					(isUserEventEnabled && helpers.isUserEventMethod(node))
+					(isUserEventEnabled &&
+						helpers.isUserEventMethod(node, userEventSetupVars))
 				) {
 					if (node.name === USER_EVENT_SETUP_FUNCTION_NAME) {
 						return;

tests/lib/rules/await-async-events.test.ts

@@ -1083,6 +1083,34 @@ ruleTester.run(RULE_NAME, rule, {
       `,
 					}) as const
 			),
+			...USER_EVENT_ASYNC_FUNCTIONS.map(
+				(eventMethod) =>
+					({
+						code: `
+        import userEvent from '${testingFramework}'
+        test('unhandled promise from event method called from userEvent.setup() return value is invalid', async () => {
+          const user = userEvent.setup();
+          user.${eventMethod}(getByLabelText('username'))
+        })
+        `,
+						errors: [
+							{
+								line: 5,
+								column: 11,
+								messageId: 'awaitAsyncEvent',
+								data: { name: eventMethod },
+							},
+						],
+						options: [{ eventModule: 'userEvent' }],
+						output: `
+        import userEvent from '${testingFramework}'
+        test('unhandled promise from event method called from userEvent.setup() return value is invalid', async () => {
+          const user = userEvent.setup();
+          await user.${eventMethod}(getByLabelText('username'))
+        })
+        `,
+					}) as const
+			),
 		]),
 		{
 			code: `