Merge v4 with develop

Author: Belco90

.all-contributorsrc

@@ -306,6 +306,37 @@
         "doc",
         "test"
       ]
+    },
+    {
+      "login": "codecog",
+      "name": "Josh Kelly",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/5106076?v=4",
+      "profile": "https://github.com/codecog",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "alessbell",
+      "name": "Alessia Bellisario",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/5139846?v=4",
+      "profile": "http://aless.co",
+      "contributions": [
+        "code",
+        "test",
+        "doc"
+      ]
+    },
+    {
+      "login": "skovy",
+      "name": "Spencer Miskoviak",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/5247455?v=4",
+      "profile": "https://skovy.dev",
+      "contributions": [
+        "code",
+        "test",
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

CONTRIBUTING.md

@@ -57,15 +57,15 @@ Based on [ESLint's Rule Naming Conventions](https://eslint.org/docs/developer-gu
 In the [same way as ESLint](https://eslint.org/docs/developer-guide/working-with-rules),
 each rule has three files named with its identifier (e.g. `no-debug`):
 
-- in the `lib/rules` directory: a source file (e.g. `no-debug.js`)
-- in the `tests/lib/rules` directory: a test file (e.g. `no-debug.js`)
+- in the `lib/rules` directory: a source file (e.g. `no-debug.ts`)
+- in the `tests/lib/rules` directory: a test file (e.g. `no-debug.ts`)
 - in the `docs/rules` directory: a Markdown documentation file (e.g. `no-debug.md`)
 
 Additionally, you need to do a couple of extra things:
 
-- Import the new rule in `lib/index.js` and include it
+- Import the new rule in `lib/index.ts` and include it
   in `rules` constant (there is a test which will make sure you did
- this). Remember to include your rule under corresponding `config` if necessary
+  this). Remember to include your rule under corresponding `config` if necessary
   (a snapshot test will check this too, but you can update it just running
   `npm run test:update`).
 - Include your rule in the "Supported Rules" table within the [README.md](./README.md).
@@ -75,8 +75,8 @@ Additionally, you need to do a couple of extra things:
 
 A couple of things you need to remember when editing already existing rules:
 
-- If renaming a rule, make sure to update all points mentioned in
-  "Adding new rules" section.
+- If renaming a rule, make sure to update all points mentioned in the
+  "[Adding new rules"](#adding-new-rules) section.
 - Try to add tests to cover the changes introduced, no matter if that's
   a bug fix or a new feature.
 

README.md

@@ -24,7 +24,7 @@
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-28-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors-)
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
@@ -138,6 +138,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-multiple-assertions-wait-for](docs/rules/no-multiple-assertions-wait-for.md) | Disallow the use of multiple expect inside `waitFor`                                     |                                                                   |                    |
 | [no-node-access](docs/rules/no-node-access.md)                                   | Disallow direct Node access                                                              | ![angular-badge][] ![react-badge][] ![vue-badge][]                |                    |
+| [no-render-in-setup](docs/rules/no-render-in-setup.md)                           | Disallow the use of `render` in setup functions                                          |                                                                   |                    |
 | [no-promise-in-fire-event](docs/rules/no-promise-in-fire-event.md)               | Disallow the use of promises passed to a `fireEvent` method                              |                                                                   |                    |
 | [no-side-effects-wait-for](docs/rules/no-side-effects-wait-for.md)               | Disallow the use of side effects inside `waitFor`                                        |                                                                   |                    |
 | [no-wait-for-empty-callback](docs/rules/no-wait-for-empty-callback.md)           | Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved`                   | ![dom-badge][] ![angular-badge][] ![react-badge][] ![vue-badge][] |                    |
@@ -213,6 +214,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://www.linkedin.com/in/mateusfelix/"><img src="https://avatars2.githubusercontent.com/u/4968788?v=4" width="100px;" alt=""/><br /><sub><b>Mateus Felix</b></sub></a><br /><a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=thebinaryfelix" title="Code">💻</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=thebinaryfelix" title="Tests">⚠️</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=thebinaryfelix" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/renatoagds"><img src="https://avatars2.githubusercontent.com/u/1663717?v=4" width="100px;" alt=""/><br /><sub><b>Renato Augusto Gama dos Santos</b></sub></a><br /><a href="#ideas-renatoagds" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=renatoagds" title="Code">💻</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=renatoagds" title="Documentation">📖</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=renatoagds" title="Tests">⚠️</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/codecog"><img src="https://avatars0.githubusercontent.com/u/5106076?v=4" width="100px;" alt=""/><br /><sub><b>Josh Kelly</b></sub></a><br /><a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=codecog" title="Code">💻</a></td>
+    <td align="center"><a href="http://aless.co"><img src="https://avatars0.githubusercontent.com/u/5139846?v=4" width="100px;" alt=""/><br /><sub><b>Alessia Bellisario</b></sub></a><br /><a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=alessbell" title="Code">💻</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=alessbell" title="Tests">⚠️</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=alessbell" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://skovy.dev"><img src="https://avatars1.githubusercontent.com/u/5247455?v=4" width="100px;" alt=""/><br /><sub><b>Spencer Miskoviak</b></sub></a><br /><a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=skovy" title="Code">💻</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=skovy" title="Tests">⚠️</a> <a href="https://github.com/testing-library/eslint-plugin-testing-library/commits?author=skovy" title="Documentation">📖</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-enable -->

docs/rules/consistent-data-testid.md

@@ -24,10 +24,10 @@ const baz = props => <div>...</div>;
 
 ## Options
 
-| Option            | Required | Default       | Details                                                                                                                                                                                                                                                       | Example                                |
-| ----------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| `testIdPattern`   | Yes      | None          | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js` | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$` |
-| `testIdAttribute` | No       | `data-testid` | A string used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid)       | `data-my-test-attribute`               |
+| Option            | Required | Default       | Details                                                                                                                                                                                                                                                                       | Example                                               |
+| ----------------- | -------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `testIdPattern`   | Yes      | None          | A regex used to validate the format of the `data-testid` value. `{fileName}` can optionally be used as a placeholder and will be substituted with the name of the file OR the name of the files parent directory in the case when the file name is `index.js`                 | `^{fileName}(\_\_([A-Z]+[a-z]_?)+)_\$`                |
+| `testIdAttribute` | No       | `data-testid` | A string (or array of strings) used to specify the attribute used for querying by ID. This is only required if data-testid has been explicitly overridden in the [RTL configuration](https://testing-library.com/docs/dom-testing-library/api-queries#overriding-data-testid) | `data-my-test-attribute`, `["data-testid", "testId"]` |
 
 ## Example
 
@@ -41,3 +41,14 @@ const baz = props => <div>...</div>;
   ]
 }
 ```
+
+```json
+{
+  "testing-library/consistent-data-testid": [
+    2,
+    {
+      "testIdAttribute": ["data-testid", "testId"]
+    }
+  ]
+}
+```

docs/rules/no-render-in-setup.md

@@ -0,0 +1,57 @@
+# Disallow the use of `render` in setup functions (no-render-in-setup)
+
+## Rule Details
+
+This rule disallows the usage of `render` (or a custom render function) in setup functions (`beforeEach` and `beforeAll`) in favor of moving `render` closer to test assertions.
+
+Examples of **incorrect** code for this rule:
+
+```js
+beforeEach(() => {
+  render(<MyComponent />);
+});
+
+it('Should have foo', () => {
+  expect(screen.getByText('foo')).toBeInTheDocument();
+});
+
+it('Should have bar', () => {
+  expect(screen.getByText('bar')).toBeInTheDocument();
+});
+```
+
+```js
+beforeAll(() => {
+  render(<MyComponent />);
+});
+
+it('Should have foo', () => {
+  expect(screen.getByText('foo')).toBeInTheDocument();
+});
+
+it('Should have bar', () => {
+  expect(screen.getByText('bar')).toBeInTheDocument();
+});
+```
+
+Examples of **correct** code for this rule:
+
+```js
+it('Should have foo and bar', () => {
+  render(<MyComponent />);
+  expect(screen.getByText('foo')).toBeInTheDocument();
+  expect(screen.getByText('bar')).toBeInTheDocument();
+});
+```
+
+If you use [custom render functions](https://testing-library.com/docs/example-react-redux) then you can set a config option in your `.eslintrc` to look for these.
+
+```
+   "testing-library/no-render-in-setup": ["error", {"renderFunctions": ["renderWithRedux", "renderWithRouter"]}],
+```
+
+If you would like to allow the use of `render` (or a custom render function) in _either_ `beforeAll` or `beforeEach`, this can be configured using the option `allowTestingFrameworkSetupHook`. This may be useful if you have configured your tests to [skip auto cleanup](https://testing-library.com/docs/react-testing-library/setup#skipping-auto-cleanup). `allowTestingFrameworkSetupHook` is an enum that accepts either `"beforeAll"` or `"beforeEach"`.
+
+```
+   "testing-library/no-render-in-setup": ["error", {"allowTestingFrameworkSetupHook": "beforeAll"}],
+```

docs/rules/prefer-screen-queries.md

@@ -60,6 +60,11 @@ const { rerender, unmount, asFragment } = render(<Foo />);
 rerender(<Foo />);
 asFragment();
 unmount();
+
+// using baseElement
+const { getByText } = render(<Foo />, { baseElement: treeA });
+// using container
+const { getAllByText } = render(<Foo />, { container: treeA });
 ```
 
 ## Further Reading

docs/rules/prefer-wait-for.md

@@ -23,7 +23,7 @@ const foo = async () => {
   await waitForElement(() => {});
   await waitForDomChange();
   await waitForDomChange(mutationObserverOptions);
-  await waitForDomChange({ timeout: 100});
+  await waitForDomChange({ timeout: 100 });
 };
 ```
 

lib/index.ts

@@ -8,6 +8,7 @@ import noDebug from './rules/no-debug';
 import noDomImport from './rules/no-dom-import';
 import noManualCleanup from './rules/no-manual-cleanup';
 import noNodeAccess from './rules/no-node-access';
+import noRenderInSetup from './rules/no-render-in-setup';
 import noWaitForEmptyCallback from './rules/no-wait-for-empty-callback';
 import noPromiseInFireEvent from './rules/no-promise-in-fire-event';
 import preferExplicitAssert from './rules/prefer-explicit-assert';
@@ -33,6 +34,7 @@ const rules = {
   'no-multiple-assertions-wait-for': noMultipleAssertionsWaitFor,
   'no-node-access': noNodeAccess,
   'no-promise-in-fire-event': noPromiseInFireEvent,
+  'no-render-in-setup': noRenderInSetup,
   'no-side-effects-wait-for': noSideEffectsWaitFor,
   'no-wait-for-empty-callback': noWaitForEmptyCallback,
   'prefer-explicit-assert': preferExplicitAssert,

lib/node-utils.ts

@@ -1,15 +1,10 @@
-import { TSESTree } from '@typescript-eslint/experimental-utils';
+import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/experimental-utils';
+import { RuleContext } from '@typescript-eslint/experimental-utils/dist/ts-eslint';
 
 export function isCallExpression(
   node: TSESTree.Node
 ): node is TSESTree.CallExpression {
-  return node && node.type === 'CallExpression';
-}
-
-export function isAwaitExpression(
-  node: TSESTree.Node
-): node is TSESTree.AwaitExpression {
-  return node && node.type === 'AwaitExpression';
+  return node && node.type === AST_NODE_TYPES.CallExpression;
 }
 
 export function isNewExpression(
@@ -19,57 +14,57 @@ export function isNewExpression(
 }
 
 export function isIdentifier(node: TSESTree.Node): node is TSESTree.Identifier {
-  return node && node.type === 'Identifier';
+  return node && node.type === AST_NODE_TYPES.Identifier;
 }
 
 export function isMemberExpression(
   node: TSESTree.Node
 ): node is TSESTree.MemberExpression {
-  return node && node.type === 'MemberExpression';
+  return node && node.type === AST_NODE_TYPES.MemberExpression;
 }
 
 export function isLiteral(node: TSESTree.Node): node is TSESTree.Literal {
-  return node && node.type === 'Literal';
+  return node && node.type === AST_NODE_TYPES.Literal;
 }
 
 export function isImportSpecifier(
   node: TSESTree.Node
 ): node is TSESTree.ImportSpecifier {
-  return node && node.type === 'ImportSpecifier';
+  return node && node.type === AST_NODE_TYPES.ImportSpecifier;
 }
 
 export function isImportDefaultSpecifier(
   node: TSESTree.Node
 ): node is TSESTree.ImportDefaultSpecifier {
-  return node && node.type === 'ImportDefaultSpecifier';
+  return node && node.type === AST_NODE_TYPES.ImportDefaultSpecifier;
 }
 
 export function isBlockStatement(
   node: TSESTree.Node
 ): node is TSESTree.BlockStatement {
-  return node && node.type === 'BlockStatement';
+  return node && node.type === AST_NODE_TYPES.BlockStatement;
 }
 
 export function isVariableDeclarator(
   node: TSESTree.Node
 ): node is TSESTree.VariableDeclarator {
-  return node && node.type === 'VariableDeclarator';
+  return node && node.type === AST_NODE_TYPES.VariableDeclarator;
 }
 
 export function isObjectPattern(
   node: TSESTree.Node
 ): node is TSESTree.ObjectPattern {
-  return node && node.type === 'ObjectPattern';
+  return node && node.type === AST_NODE_TYPES.ObjectPattern;
 }
 
 export function isProperty(node: TSESTree.Node): node is TSESTree.Property {
-  return node && node.type === 'Property';
+  return node && node.type === AST_NODE_TYPES.Property;
 }
 
 export function isJSXAttribute(
   node: TSESTree.Node
 ): node is TSESTree.JSXAttribute {
-  return node && node.type === 'JSXAttribute';
+  return node && node.type === AST_NODE_TYPES.JSXAttribute;
 }
 
 export function findClosestCallExpressionNode(
@@ -101,6 +96,10 @@ export function findClosestCallNode(
   }
 }
 
+export function isObjectExpression(node: TSESTree.Expression): node is TSESTree.ObjectExpression {
+  return node?.type === AST_NODE_TYPES.ObjectExpression
+}
+
 export function hasThenProperty(node: TSESTree.Node) {
   return (
     isMemberExpression(node) &&
@@ -109,19 +108,54 @@ export function hasThenProperty(node: TSESTree.Node) {
   );
 }
 
-export function isArrowFunctionExpression(
+export function isAwaitExpression(
   node: TSESTree.Node
-): node is TSESTree.ArrowFunctionExpression {
-  return node && node.type === 'ArrowFunctionExpression';
+): node is TSESTree.AwaitExpression {
+  return node && node.type === AST_NODE_TYPES.AwaitExpression;
 }
 
-function isRenderFunction(
+export function isArrowFunctionExpression(node: TSESTree.Node): node is TSESTree.ArrowFunctionExpression {
+  return node && node.type === AST_NODE_TYPES.ArrowFunctionExpression
+}
+
+export function isReturnStatement(node: TSESTree.Node): node is TSESTree.ReturnStatement {
+  return node && node.type === AST_NODE_TYPES.ReturnStatement
+}
+
+export function isAwaited(node: TSESTree.Node) {
+  return isAwaitExpression(node) || isArrowFunctionExpression(node) || isReturnStatement(node)
+}
+
+export function isPromiseResolved(node: TSESTree.Node) {
+  const parent = node.parent;
+
+  // wait(...).then(...)
+  if (isCallExpression(parent)) {
+    return hasThenProperty(parent.parent);
+  }
+
+  // promise.then(...)
+  return hasThenProperty(parent);
+}
+
+export function getVariableReferences(context: RuleContext<string, []>, node: TSESTree.Node) {
+  return (isVariableDeclarator(node) && context.getDeclaredVariables(node)[0].references.slice(1)) || [];
+}
+
+export function isRenderFunction(
   callNode: TSESTree.CallExpression,
   renderFunctions: string[]
 ) {
-  return ['render', ...renderFunctions].some(
-    name => isIdentifier(callNode.callee) && name === callNode.callee.name
-  );
+  // returns true for `render` and e.g. `customRenderFn`
+  // as well as `someLib.render` and `someUtils.customRenderFn`
+  return renderFunctions.some(name => {
+    return (
+      (isIdentifier(callNode.callee) && name === callNode.callee.name) ||
+      (isMemberExpression(callNode.callee) &&
+        isIdentifier(callNode.callee.property) &&
+        name === callNode.callee.property.name)
+    );
+  });
 }
 
 export function isRenderVariableDeclarator(