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