You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
3.6 KiB
172 lines
3.6 KiB
# disallow large snapshots (`no-large-snapshots`) |
|
|
|
When using Jest's snapshot capability one should be mindful of the size of |
|
created snapshots. As a general best practice snapshots should be limited in |
|
size in order to be more manageable and reviewable. A stored snapshot is only as |
|
good as its review and as such keeping it short, sweet, and readable is |
|
important to allow for thorough reviews. |
|
|
|
## Usage |
|
|
|
Because Jest snapshots are written with back-ticks (\` \`) which are only valid |
|
with |
|
[ES2015 onwards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) |
|
you should set `parserOptions` in your config to at least allow ES2015 in order |
|
to use this rule: |
|
|
|
```js |
|
module.exports = { |
|
parserOptions: { |
|
ecmaVersion: 2015, |
|
}, |
|
}; |
|
``` |
|
|
|
## Rule Details |
|
|
|
This rule looks at all Jest inline and external snapshots (files with `.snap` |
|
extension) and validates that each stored snapshot within those files does not |
|
exceed 50 lines (by default, this is configurable as explained in `Options` |
|
section below). |
|
|
|
Example of **incorrect** code for this rule: |
|
|
|
```js |
|
exports[`a large snapshot 1`] = ` |
|
line 1 |
|
line 2 |
|
line 3 |
|
line 4 |
|
line 5 |
|
line 6 |
|
line 7 |
|
line 8 |
|
line 9 |
|
line 10 |
|
line 11 |
|
line 12 |
|
line 13 |
|
line 14 |
|
line 15 |
|
line 16 |
|
line 17 |
|
line 18 |
|
line 19 |
|
line 20 |
|
line 21 |
|
line 22 |
|
line 23 |
|
line 24 |
|
line 25 |
|
line 26 |
|
line 27 |
|
line 28 |
|
line 29 |
|
line 30 |
|
line 31 |
|
line 32 |
|
line 33 |
|
line 34 |
|
line 35 |
|
line 36 |
|
line 37 |
|
line 38 |
|
line 39 |
|
line 40 |
|
line 41 |
|
line 42 |
|
line 43 |
|
line 44 |
|
line 45 |
|
line 46 |
|
line 47 |
|
line 48 |
|
line 49 |
|
line 50 |
|
line 51 |
|
`; |
|
``` |
|
|
|
Example of **correct** code for this rule: |
|
|
|
```js |
|
exports[`a more manageable and readable snapshot 1`] = ` |
|
line 1 |
|
line 2 |
|
line 3 |
|
line 4 |
|
`; |
|
``` |
|
|
|
## Options |
|
|
|
This rule has options for modifying the max number of lines allowed for a |
|
snapshot: |
|
|
|
In an `eslintrc` file: |
|
|
|
```json |
|
{ |
|
"rules": { |
|
"jest/no-large-snapshots": ["warn", { "maxSize": 12, "inlineMaxSize": 6 }] |
|
} |
|
} |
|
``` |
|
|
|
Max number of lines allowed could be defined by snapshot type (Inline and |
|
External). Use `inlineMaxSize` for |
|
[Inline Snapshots](https://jestjs.io/docs/en/snapshot-testing#inline-snapshots) |
|
size and `maxSize` for |
|
[External Snapshots](https://jestjs.io/docs/en/snapshot-testing#snapshot-testing-with-jest). |
|
If only `maxSize` is provided on options, the value of `maxSize` will be used to |
|
both snapshot types (Inline and External). |
|
|
|
Since `eslint-disable` comments are not preserved by Jest when updating |
|
snapshots, you can use the `allowedSnapshots` option to have specific snapshots |
|
allowed regardless of their size. |
|
|
|
This option takes a map, with the key being the absolute filepath to a snapshot |
|
file, and the value an array of values made up of strings and regular |
|
expressions to compare to the names of the snapshots in the `.snap` file when |
|
checking if the snapshots size should be allowed. |
|
|
|
Note that regular expressions can only be passed in via `.eslintrc.js` as |
|
instances of `RegExp`. |
|
|
|
In an `.eslintrc.js` file: |
|
|
|
```javascript |
|
module.exports = { |
|
rules: { |
|
'jest/no-large-snapshots': [ |
|
'error', |
|
{ |
|
allowedSnapshots: { |
|
'/path/to/file.js.snap': ['snapshot name 1', /a big snapshot \d+/], |
|
}, |
|
}, |
|
], |
|
}, |
|
}; |
|
``` |
|
|
|
Since absolute paths are typically not very portable, you can use the builtin |
|
`path.resolve` function to expand relative paths into absolutes like so: |
|
|
|
```javascript |
|
const path = require('path'); |
|
|
|
module.exports = { |
|
rules: { |
|
'jest/no-large-snapshots': [ |
|
'error', |
|
{ |
|
allowedSnapshots: { |
|
[path.resolve('test/__snapshots__/get.js.snap')]: ['full request'], |
|
[path.resolve('test/__snapshots__/put.js.snap')]: ['full request'], |
|
}, |
|
}, |
|
], |
|
}, |
|
}; |
|
```
|
|
|