feat: 🎸 new no-wait-snapshot rule

✅ Closes: #214

Author: Gpx

README.md

@@ -23,7 +23,9 @@
 [![Tweet][tweet-badge]][tweet-url]
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ## Installation
@@ -143,6 +145,7 @@ To enable this configuration use the `extends` property in your
 | [no-manual-cleanup](docs/rules/no-manual-cleanup.md)                   | Disallow the use of `cleanup`                                              |                                                                           |                    |
 | [no-render-in-setup](docs/rules/no-render-in-setup.md)                 | Disallow the use of `render` in setup functions                            |                                                                           |                    |
 | [no-wait-for-empty-callback](docs/rules/no-wait-for-empty-callback.md) | Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved`     |                                                                           |                    |
+| [no-wait-snapshot](docs/rules/no-wait-snapshot.md)                     | Ensures no snapshot is generated inside of a `wait` call                   |                                                                           |                    |
 | [prefer-explicit-assert](docs/rules/prefer-explicit-assert.md)         | Suggest using explicit assertions rather than just `getBy*` queries        |                                                                           |                    |
 | [prefer-find-by](docs/rules/prefer-find-by.md)                         | Suggest using `findBy*` methods instead of the `waitFor` + `getBy` queries | ![recommended-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] | ![fixable-badge][] |
 | [prefer-presence-queries](docs/rules/prefer-presence-queries.md)       | Enforce specific queries when checking element is present or not           |                                                                           |                    |
@@ -222,6 +225,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

docs/rules/no-wait-snapshot.test.md

@@ -0,0 +1,42 @@
+# Ensures no snapshot is generated inside of a `wait` call' (no-wait-snapshot)
+
+Ensure that no calls to `toMatchSnapshot` are made from within a `wait` method
+
+## Rule Details
+
+The `wait()` method runs in a timer loop. So it'll retry every n amount of time.
+If a snapshot is generated inside the wait condition, jest will generate one snapshot per loop.
+
+The problem then is the amount of loop ran until the condition is met will vary between different computers (or CI machines.) This leads to tests that will regenerate a lot of snapshots until the condition is match when devs run those tests locally updating the snapshots; e.g devs cannot run `jest -u` locally or it'll generate a lot of invalid snapshots who'll fail during CI.
+
+Examples of **incorrect** code for this rule:
+
+```js
+const foo = async () => {
+  // ...
+  await waitFor(() => expect(container).toMatchSnapshot());
+  // ...
+};
+
+const bar = async () => {
+  // ...
+  await wait(() => {
+    expect(container).toMatchSnapshot();
+  });
+  // ...
+};
+```
+
+Examples of **correct** code for this rule:
+
+```js
+const foo = () => {
+  // ...
+  expect(container).toMatchSnapshot();
+  // ...
+};
+```
+
+## Further Reading
+
+- [Async Utilities](https://testing-library.com/docs/dom-testing-library/api-async)

lib/index.ts

@@ -8,6 +8,7 @@ import noDomImport from './rules/no-dom-import';
 import noManualCleanup from './rules/no-manual-cleanup';
 import noRenderInSetup from './rules/no-render-in-setup';
 import noWaitForEmptyCallback from './rules/no-wait-for-empty-callback';
+import noWaitSnapshot from './rules/no-wait-snapshot';
 import preferExplicitAssert from './rules/prefer-explicit-assert';
 import preferPresenceQueries from './rules/prefer-presence-queries';
 import preferScreenQueries from './rules/prefer-screen-queries';
@@ -25,6 +26,7 @@ const rules = {
   'no-manual-cleanup': noManualCleanup,
   'no-render-in-setup': noRenderInSetup,
   'no-wait-for-empty-callback': noWaitForEmptyCallback,
+  'no-wait-snapshot': noWaitSnapshot,
   'prefer-explicit-assert': preferExplicitAssert,
   'prefer-find-by': preferFindBy,
   'prefer-presence-queries': preferPresenceQueries,

lib/rules/no-wait-snapshot.ts

@@ -0,0 +1,40 @@
+import { ESLintUtils, TSESTree } from '@typescript-eslint/experimental-utils';
+import { getDocsUrl, ASYNC_UTILS } from '../utils';
+import { findClosestCallNode } from '../node-utils';
+
+export const RULE_NAME = 'no-wait-snapshot';
+export type MessageIds = 'noWaitSnapshot';
+type Options = [];
+
+function isWithinAsyncUtil(node: TSESTree.Node) {
+  return ASYNC_UTILS.some(
+    asyncUtil => findClosestCallNode(node, asyncUtil) != null
+  );
+}
+
+export default ESLintUtils.RuleCreator(getDocsUrl)<Options, MessageIds>({
+  name: RULE_NAME,
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ensures no snapshot is generated inside of a `wait` call',
+      category: 'Best Practices',
+      recommended: 'warn',
+    },
+    messages: {
+      noWaitSnapshot: "A snapshot can't be generated inside of a `wait` call",
+    },
+    fixable: null,
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    return {
+      [`Identifier[name='toMatchSnapshot']`](node: TSESTree.Identifier) {
+        if (isWithinAsyncUtil(node))
+          context.report({ node, messageId: 'noWaitSnapshot' });
+      },
+    };
+  },
+});

tests/lib/rules/no-wait-snapshot.test.ts

@@ -0,0 +1,52 @@
+import { createRuleTester } from '../test-utils';
+import rule, { RULE_NAME } from '../../../lib/rules/no-wait-snapshot';
+import { ASYNC_UTILS } from '../../../lib/utils';
+
+const ruleTester = createRuleTester();
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    ...ASYNC_UTILS.map(asyncUtil => ({
+      code: `
+        test('snapshot calls outside of ${asyncUtil} are valid', () => {
+          expect(foo).toMatchSnapshot()
+          await ${asyncUtil}(() => expect(foo).toBeDefined())
+          expect(foo).toMatchSnapshot()
+        })
+      `,
+    })),
+    ...ASYNC_UTILS.map(asyncUtil => ({
+      code: `
+        test('snapshot calls outside of ${asyncUtil} are valid', () => {
+          expect(foo).toMatchSnapshot()
+          await ${asyncUtil}(() => {
+              expect(foo).toBeDefined()
+          })
+          expect(foo).toMatchSnapshot()
+        })
+      `,
+    })),
+  ],
+  invalid: [
+    ...ASYNC_UTILS.map(asyncUtil => ({
+      code: `
+        import { ${asyncUtil} } from '@testing-library/dom';
+        test('snapshot calls within ${asyncUtil} are not valid', async () => {
+          await ${asyncUtil}(() => expect(foo).toMatchSnapshot());
+        });
+      `,
+      errors: [{ line: 4, messageId: 'noWaitSnapshot' }],
+    })),
+    ...ASYNC_UTILS.map(asyncUtil => ({
+      code: `
+        import { ${asyncUtil} } from '@testing-library/dom';
+        test('snapshot calls within ${asyncUtil} are not valid', async () => {
+          await ${asyncUtil}(() => {
+              expect(foo).toMatchSnapshot()
+          });
+        });
+      `,
+      errors: [{ line: 5, messageId: 'noWaitSnapshot' }],
+    })),
+  ],
+});