-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new rule no-get-by-for-checking-element-not-present (#65)
BREAKING CHANGE: rule prefer-expect-query-by has disappeared in favor of new rule no-get-by-for-checking-element-not-present
- Loading branch information
Thomas Lombart
committed
Jan 28, 2020
1 parent
6420867
commit 1aa9238
Showing
8 changed files
with
257 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| # Disallow the use of `getBy*` queries when checking elements are not present (no-get-by-for-checking-element-not-present) | ||
|
|
||
| The (DOM) Testing Library allows to query DOM elements using different types of queries such as `getBy*` and `queryBy*`. Using `getBy*` throws an error in case the element is not found. This is useful when: | ||
|
|
||
| - using method like `waitForElement`, which are `async` functions that will wait for the element to be found until a certain timeout, after that the test will fail. | ||
| - using `getBy` queries as an assert itself, so if the element is not found the error thrown will work as the check itself within the test. | ||
|
|
||
| However, when asserting if an element is not present or waiting for disappearance, using `getBy*` will make the test fail immediately. Instead it is recommended to use `queryBy*`, which does not throw and therefore we can: | ||
|
|
||
| - assert element does not exist: `expect(queryByText("Foo")).not.toBeInTheDocument()` | ||
| - wait for disappearance: `await waitForElementToBeRemoved(() => queryByText('the mummy'))` | ||
|
|
||
| ## Rule details | ||
|
|
||
| This rule fires whenever: | ||
|
|
||
| - `expect` is used to assert element does not exist with `.not.toBeInTheDocument()` or `.toBeNull()` matchers | ||
| - `waitForElementToBeRemoved` async util is used to wait for element to be removed from DOM | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```js | ||
| test('some test', () => { | ||
| const { getByText } = render(<App />); | ||
| expect(getByText('Foo')).not.toBeInTheDocument(); | ||
| expect(getByText('Foo')).toBeFalsy(); | ||
| expect(getByText('Foo')).toBeNull(); | ||
| }); | ||
| ``` | ||
|
|
||
| ```js | ||
| test('some test', async () => { | ||
| const utils = render(<App />); | ||
| await waitForElementToBeRemoved(() => utils.getByText('Foo')); | ||
| }); | ||
| ``` | ||
|
|
||
| Examples of **correct** code for this rule: | ||
|
|
||
| ```js | ||
| test('some test', () => { | ||
| const { getByText } = render(<App />); | ||
| expect(getByText('Foo')).toBeInTheDocument(); | ||
| expect(queryByText('Foo')).not.toBeInTheDocument(); | ||
| expect(queryByText('Foo')).toBeFalsy(); | ||
| }); | ||
| ``` | ||
|
|
||
| ```js | ||
| test('some test', async () => { | ||
| const utils = render(<App />); | ||
| await waitForElementToBeRemoved(() => utils.queryByText('Foo')); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Further Reading | ||
|
|
||
| - [Asserting elements are not present](https://testing-library.com/docs/guide-disappearance#asserting-elements-are-not-present) | ||
| - [Waiting for disappearance](https://testing-library.com/docs/guide-disappearance#waiting-for-disappearance) | ||
| - [jest-dom note about using `getBy` within assertions](https://testing-library.com/docs/ecosystem-jest-dom) | ||
| - [Testing Library queries cheatsheet](https://testing-library.com/docs/dom-testing-library/cheatsheet#queries) |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| 'use strict'; | ||
|
|
||
| const { getDocsUrl } = require('../utils'); | ||
|
|
||
| const falsyMatchers = ['toBeNull', 'toBeFalsy']; | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| docs: { | ||
| category: 'Best Practices', | ||
| description: | ||
| 'Disallow the use of `getBy*` queries when checking elements are not present', | ||
| recommended: 'error', | ||
| url: getDocsUrl('no-get-by-for-checking-element-not-present'), | ||
| }, | ||
| messages: { | ||
| expectQueryBy: | ||
| 'Use `getBy*` only when checking elements are present, otherwise use `queryBy*`', | ||
| }, | ||
| schema: [], | ||
| type: 'suggestion', | ||
| fixable: null, | ||
| }, | ||
|
|
||
| create: context => ({ | ||
| [`Identifier[name=/getBy|getAllBy/]`](node) { | ||
| const expectCallNode = findClosestCallNode(node, 'expect'); | ||
|
|
||
| // expect(getByText("foo"))... | ||
| if (expectCallNode) { | ||
| const expectStatement = expectCallNode.parent; | ||
| const matcher = expectStatement.property.name; | ||
|
|
||
| if (matcher === 'not') { | ||
| const negatedMatcher = expectStatement.parent.property.name; | ||
|
|
||
| if (!falsyMatchers.includes(negatedMatcher)) { | ||
| return context.report({ | ||
| node, | ||
| messageId: 'expectQueryBy', | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| if (falsyMatchers.includes(matcher)) { | ||
| return context.report({ | ||
| node, | ||
| messageId: 'expectQueryBy', | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| const waitCallNode = findClosestCallNode( | ||
| node, | ||
| 'waitForElementToBeRemoved' | ||
| ); | ||
|
|
||
| if (waitCallNode) { | ||
| return context.report({ | ||
| node, | ||
| messageId: 'expectQueryBy', | ||
| }); | ||
| } | ||
| }, | ||
| }), | ||
| }; | ||
|
|
||
| function findClosestCallNode(node, name) { | ||
| if (!node.parent) { | ||
| return false; | ||
| } | ||
|
|
||
| if (node.type === 'CallExpression' && node.callee.name === name) { | ||
| return node; | ||
| } else { | ||
| return findClosestCallNode(node.parent, name); | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.