source: frontend/node_modules/eslint-plugin-jest/docs/rules/no-large-snapshots.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 12 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 3.6 KB
Line 
1# disallow large snapshots (`no-large-snapshots`)
2
3When using Jest's snapshot capability one should be mindful of the size of
4created snapshots. As a general best practice snapshots should be limited in
5size in order to be more manageable and reviewable. A stored snapshot is only as
6good as its review and as such keeping it short, sweet, and readable is
7important to allow for thorough reviews.
8
9## Usage
10
11Because Jest snapshots are written with back-ticks (\` \`) which are only valid
12with
13[ES2015 onwards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
14you should set `parserOptions` in your config to at least allow ES2015 in order
15to use this rule:
16
17```js
18module.exports = {
19 parserOptions: {
20 ecmaVersion: 2015,
21 },
22};
23```
24
25## Rule Details
26
27This rule looks at all Jest inline and external snapshots (files with `.snap`
28extension) and validates that each stored snapshot within those files does not
29exceed 50 lines (by default, this is configurable as explained in `Options`
30section below).
31
32Example of **incorrect** code for this rule:
33
34```js
35exports[`a large snapshot 1`] = `
36line 1
37line 2
38line 3
39line 4
40line 5
41line 6
42line 7
43line 8
44line 9
45line 10
46line 11
47line 12
48line 13
49line 14
50line 15
51line 16
52line 17
53line 18
54line 19
55line 20
56line 21
57line 22
58line 23
59line 24
60line 25
61line 26
62line 27
63line 28
64line 29
65line 30
66line 31
67line 32
68line 33
69line 34
70line 35
71line 36
72line 37
73line 38
74line 39
75line 40
76line 41
77line 42
78line 43
79line 44
80line 45
81line 46
82line 47
83line 48
84line 49
85line 50
86line 51
87`;
88```
89
90Example of **correct** code for this rule:
91
92```js
93exports[`a more manageable and readable snapshot 1`] = `
94line 1
95line 2
96line 3
97line 4
98`;
99```
100
101## Options
102
103This rule has options for modifying the max number of lines allowed for a
104snapshot:
105
106In an `eslintrc` file:
107
108```json
109{
110 "rules": {
111 "jest/no-large-snapshots": ["warn", { "maxSize": 12, "inlineMaxSize": 6 }]
112 }
113}
114```
115
116Max number of lines allowed could be defined by snapshot type (Inline and
117External). Use `inlineMaxSize` for
118[Inline Snapshots](https://jestjs.io/docs/en/snapshot-testing#inline-snapshots)
119size and `maxSize` for
120[External Snapshots](https://jestjs.io/docs/en/snapshot-testing#snapshot-testing-with-jest).
121If only `maxSize` is provided on options, the value of `maxSize` will be used to
122both snapshot types (Inline and External).
123
124Since `eslint-disable` comments are not preserved by Jest when updating
125snapshots, you can use the `allowedSnapshots` option to have specific snapshots
126allowed regardless of their size.
127
128This option takes a map, with the key being the absolute filepath to a snapshot
129file, and the value an array of values made up of strings and regular
130expressions to compare to the names of the snapshots in the `.snap` file when
131checking if the snapshots size should be allowed.
132
133Note that regular expressions can only be passed in via `.eslintrc.js` as
134instances of `RegExp`.
135
136In an `.eslintrc.js` file:
137
138```javascript
139module.exports = {
140 rules: {
141 'jest/no-large-snapshots': [
142 'error',
143 {
144 allowedSnapshots: {
145 '/path/to/file.js.snap': ['snapshot name 1', /a big snapshot \d+/],
146 },
147 },
148 ],
149 },
150};
151```
152
153Since absolute paths are typically not very portable, you can use the builtin
154`path.resolve` function to expand relative paths into absolutes like so:
155
156```javascript
157const path = require('path');
158
159module.exports = {
160 rules: {
161 'jest/no-large-snapshots': [
162 'error',
163 {
164 allowedSnapshots: {
165 [path.resolve('test/__snapshots__/get.js.snap')]: ['full request'],
166 [path.resolve('test/__snapshots__/put.js.snap')]: ['full request'],
167 },
168 },
169 ],
170 },
171};
172```
Note: See TracBrowser for help on using the repository browser.