Skip to content

feat(no-wait-for-side-effects): report render in waitFor #363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
26 changes: 25 additions & 1 deletion docs/rules/no-wait-for-side-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Rule Details

This rule aims to avoid the usage of side effects actions (`fireEvent` or `userEvent`) inside `waitFor`.
This rule aims to avoid the usage of side effects actions (`fireEvent`, `userEvent` or `render`) inside `waitFor`.
Since `waitFor` is intended for things that have a non-deterministic amount of time between the action you performed and the assertion passing,
the callback can be called (or checked for errors) a non-deterministic number of times and frequency.
This will make your side-effect run multiple times.
Expand Down Expand Up @@ -32,6 +32,18 @@ Example of **incorrect** code for this rule:
userEvent.click(button);
expect(b).toEqual('b');
});

// or
await waitFor(() => {
render(<App />)
expect(b).toEqual('b');
});

// or
await waitFor(function() {
render(<App />)
expect(b).toEqual('b');
});
};
```

Expand Down Expand Up @@ -60,6 +72,18 @@ Examples of **correct** code for this rule:
await waitFor(function() {
expect(b).toEqual('b');
});

// or
render(<App />)
await waitFor(() => {
expect(b).toEqual('b');
});

// or
render(<App />)
await waitFor(function() {
expect(b).toEqual('b');
});
};
```

Expand Down
9 changes: 9 additions & 0 deletions lib/node-utils/is-node-of-type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ export const isCallExpression = isNodeOfType(AST_NODE_TYPES.CallExpression);
export const isExpressionStatement = isNodeOfType(
AST_NODE_TYPES.ExpressionStatement
);
export const isVariableDeclaration = isNodeOfType(
AST_NODE_TYPES.VariableDeclaration
);
export const isAssignmentExpression = isNodeOfType(
AST_NODE_TYPES.AssignmentExpression
);
export const isSequenceExpression = isNodeOfType(
AST_NODE_TYPES.SequenceExpression
);
export const isImportDeclaration = isNodeOfType(
AST_NODE_TYPES.ImportDeclaration
);
Expand Down
94 changes: 87 additions & 7 deletions lib/rules/no-wait-for-side-effects.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { TSESTree } from '@typescript-eslint/experimental-utils';
import {
getPropertyIdentifierNode,
isExpressionStatement,
isVariableDeclaration,
isAssignmentExpression,
isCallExpression,
isSequenceExpression,
} from '../node-utils';
import { createTestingLibraryRule } from '../create-testing-library-rule';

Expand Down Expand Up @@ -32,7 +36,11 @@ export default createTestingLibraryRule<Options, MessageIds>({
defaultOptions: [],
create: function (context, _, helpers) {
function isCallerWaitFor(
node: TSESTree.BlockStatement | TSESTree.CallExpression
node:
| TSESTree.BlockStatement
| TSESTree.CallExpression
| TSESTree.AssignmentExpression
| TSESTree.SequenceExpression
): boolean {
if (!node.parent) {
return false;
Expand All @@ -48,22 +56,78 @@ export default createTestingLibraryRule<Options, MessageIds>({
);
}

function isRenderInVariableDeclaration(node: TSESTree.Node) {
return (
isVariableDeclaration(node) &&
node.declarations.some(helpers.isRenderVariableDeclarator)
);
}

function isRenderInExpressionStatement(node: TSESTree.Node) {
if (
!isExpressionStatement(node) ||
!isAssignmentExpression(node.expression)
) {
return false;
}

const expressionIdentifier = getPropertyIdentifierNode(
node.expression.right
);

if (!expressionIdentifier) {
return false;
}

return helpers.isRenderUtil(expressionIdentifier);
}

function isRenderInAssignmentExpression(node: TSESTree.Node) {
if (!isAssignmentExpression(node)) {
return false;
}

const expressionIdentifier = getPropertyIdentifierNode(node.right);
if (!expressionIdentifier) {
return false;
}

return helpers.isRenderUtil(expressionIdentifier);
}

function isRenderInSequenceAssignment(node: TSESTree.Node) {
if (!isSequenceExpression(node)) {
return false;
}

return node.expressions.some(isRenderInAssignmentExpression);
}

function getSideEffectNodes(
body: TSESTree.Node[]
): TSESTree.ExpressionStatement[] {
return body.filter((node) => {
if (!isExpressionStatement(node)) {
if (!isExpressionStatement(node) && !isVariableDeclaration(node)) {
return false;
}

if (
isRenderInVariableDeclaration(node) ||
isRenderInExpressionStatement(node)
) {
return true;
}

const expressionIdentifier = getPropertyIdentifierNode(node);

if (!expressionIdentifier) {
return false;
}

return (
helpers.isFireEventUtil(expressionIdentifier) ||
helpers.isUserEventUtil(expressionIdentifier)
helpers.isUserEventUtil(expressionIdentifier) ||
helpers.isRenderUtil(expressionIdentifier)
);
}) as TSESTree.ExpressionStatement[];
}
Expand All @@ -86,19 +150,33 @@ export default createTestingLibraryRule<Options, MessageIds>({
}
}

function reportImplicitReturnSideEffect(node: TSESTree.CallExpression) {
function reportImplicitReturnSideEffect(
node:
| TSESTree.CallExpression
| TSESTree.AssignmentExpression
| TSESTree.SequenceExpression
) {
if (!isCallerWaitFor(node)) {
return;
}

const expressionIdentifier = getPropertyIdentifierNode(node.callee);
if (!expressionIdentifier) {
const expressionIdentifier = isCallExpression(node)
? getPropertyIdentifierNode(node.callee)
: null;

if (
!expressionIdentifier &&
!isRenderInAssignmentExpression(node) &&
!isRenderInSequenceAssignment(node)
) {
return;
}

if (
expressionIdentifier &&
!helpers.isFireEventUtil(expressionIdentifier) &&
!helpers.isUserEventUtil(expressionIdentifier)
!helpers.isUserEventUtil(expressionIdentifier) &&
!helpers.isRenderUtil(expressionIdentifier)
) {
return;
}
Expand All @@ -112,6 +190,8 @@ export default createTestingLibraryRule<Options, MessageIds>({
return {
'CallExpression > ArrowFunctionExpression > BlockStatement': reportSideEffects,
'CallExpression > ArrowFunctionExpression > CallExpression': reportImplicitReturnSideEffect,
'CallExpression > ArrowFunctionExpression > AssignmentExpression': reportImplicitReturnSideEffect,
'CallExpression > ArrowFunctionExpression > SequenceExpression': reportImplicitReturnSideEffect,
'CallExpression > FunctionExpression > BlockStatement': reportSideEffects,
};
},
Expand Down
Loading