fix(no-node-access): support user-event instances returned from custom render (#1048)

Author: y-hsgw

lib/rules/no-node-access.ts

@@ -1,10 +1,20 @@
+import {
+	DefinitionType,
+	type ScopeVariable,
+} from '@typescript-eslint/scope-manager';
 import { TSESTree, ASTUtils } from '@typescript-eslint/utils';
 
 import { createTestingLibraryRule } from '../create-testing-library-rule';
-import { isCallExpression, isMemberExpression } from '../node-utils';
+import {
+	getDeepestIdentifierNode,
+	getPropertyIdentifierNode,
+	isCallExpression,
+	isMemberExpression,
+} from '../node-utils';
 import {
 	ALL_RETURNING_NODES,
 	EVENT_HANDLER_METHODS,
+	getScope,
 	resolveToTestingLibraryFn,
 } from '../utils';
 
@@ -89,24 +99,39 @@ export default createTestingLibraryRule<Options, MessageIds>({
 			}
 		}
 
+		function detectTestingLibraryFn(
+			node: TSESTree.CallExpression,
+			variable: ScopeVariable | null
+		) {
+			if (variable && variable.defs.length > 0) {
+				const def = variable.defs[0];
+				if (
+					def.type === DefinitionType.Variable &&
+					isCallExpression(def.node.init)
+				) {
+					return resolveToTestingLibraryFn(def.node.init, context);
+				}
+			}
+
+			return resolveToTestingLibraryFn(node, context);
+		}
+
 		return {
 			CallExpression(node: TSESTree.CallExpression) {
-				const { callee } = node;
-				const property = isMemberExpression(callee) ? callee.property : null;
-				const object = isMemberExpression(callee) ? callee.object : null;
-
-				const propertyName = ASTUtils.isIdentifier(property)
-					? property.name
-					: null;
-				const objectName = ASTUtils.isIdentifier(object) ? object.name : null;
+				const property = getDeepestIdentifierNode(node);
+				const identifier = getPropertyIdentifierNode(node);
 
 				const isEventHandlerMethod = EVENT_HANDLER_METHODS.some(
-					(method) => method === propertyName
+					(method) => method === property?.name
 				);
 				const hasUserEventInstanceName = userEventInstanceNames.has(
-					objectName ?? ''
+					identifier?.name ?? ''
 				);
-				const testingLibraryFn = resolveToTestingLibraryFn(node, context);
+
+				const variable = identifier
+					? ASTUtils.findVariable(getScope(context, node), identifier)
+					: null;
+				const testingLibraryFn = detectTestingLibraryFn(node, variable);
 
 				if (
 					!testingLibraryFn &&

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

@@ -181,6 +181,16 @@ ruleTester.run(RULE_NAME, rule, {
         const buttonText = screen.getByText('submit');
 				const userAlias = userEvent.setup();
 				userAlias.click(buttonText);
+      `,
+			},
+			{
+				code: `
+				import userEvent from '@testing-library/user-event';
+				import { screen } from '${testingFramework}';
+				test('...', () => {
+					const buttonText = screen.getByText('submit');
+					(() => { click: userEvent.click(buttonText); })();
+				});
       `,
 			},
 			{
@@ -241,7 +251,6 @@ ruleTester.run(RULE_NAME, rule, {
 			},
 			{
 				code: `
-				// case: custom module set but not imported using ${testingFramework} (aggressive reporting limited)
 				import { screen } from '${testingFramework}';
 
         const ui = {
@@ -251,6 +260,48 @@ ruleTester.run(RULE_NAME, rule, {
 					const select = ui.select.get();
 					expect(select).toHaveClass(selectClasses.select);
 				});
+      `,
+			},
+			{
+				settings: { 'testing-library/utils-module': 'test-utils' },
+				code: `
+				// case: custom module set but not imported using ${testingFramework} (aggressive reporting limited)
+        import { screen, render } from 'test-utils';
+				import MyComponent from './MyComponent'
+
+				test('...', async () => {
+					const { user } = render(<MyComponent />)
+					await user.click(screen.getByRole("button"))
+				});
+      `,
+			},
+			{
+				settings: { 'testing-library/utils-module': 'test-utils' },
+				code: `
+				// case: custom module set but not imported using ${testingFramework} (aggressive reporting limited)
+        import { screen, render } from 'test-utils';
+				import MyComponent from './MyComponent'
+
+				test('...', async () => {
+					const result = render(<MyComponent />)
+					await result.user.click(screen.getByRole("button"))
+				});
+      `,
+			},
+			{
+				settings: {
+					'testing-library/utils-module': 'TestUtils',
+					'testing-library/custom-renders': ['renderComponent'],
+				},
+				code: `
+				// case: custom module set but not imported using ${testingFramework} (aggressive reporting limited)
+        import { screen, renderComponent } from './TestUtils';
+				import MyComponent from './MyComponent'
+
+				test('...', async () => {
+					const result = renderComponent(<MyComponent />)
+					await result.user.click(screen.getByRole("button"))
+				});
       `,
 			},
 		]