Skip to content

Commit 6fbcd9e

Browse files
pedrottimarkpedrottimark
authored
jest-snapshot: Highlight substring differences when matcher fails, part 3 (#8569)
* expect: Highlight substring differences when matcher fails, part 3 * Delete duplicate line comment slashes * Update CHANGELOG.md * Remove backslash escape preceding backslash * Replace expect with jest-snapshot in CHANGELOG.md * Delete unnecessary isExpand function * Factor out printDiffOrStringified into added print.ts file * Add unit tests for printDiffOrStringified function * Add Facebook comment to 2 added files * Fix two edge cases * Fall back to line diff if either serialization has newline * Also display diff if strings have application-specific serialization * Add test without serialize * Edit comments for consistent use of serialization versus stringified * Call getStringDiff when strings have custom serialization * Edit comment * Add tests for backtick and isLineDiffable true single-multi
1 parent fe14493 commit 6fbcd9e

File tree

10 files changed

+778
-27
lines changed

10 files changed

+778
-27
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
- `[expect]` Highlight substring differences when matcher fails, part 1 ([#8448](https://github.com/facebook/jest/pull/8448))
66
- `[expect]` Highlight substring differences when matcher fails, part 2 ([#8528](https://github.com/facebook/jest/pull/8528))
7+
- `[jest-snapshot]` Highlight substring differences when matcher fails, part 3 ([#8569](https://github.com/facebook/jest/pull/8569))
78
- `[jest-cli]` Improve chai support (with detailed output, to match jest exceptions) ([#8454](https://github.com/facebook/jest/pull/8454))
89
- `[*]` Manage the global timeout with `--testTimeout` command line argument. ([#8456](https://github.com/facebook/jest/pull/8456))
910
- `[pretty-format]` Render custom displayName of memoized components

‎e2e/__tests__/__snapshots__/failures.test.ts.snap‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -790,11 +790,8 @@ FAIL __tests__/snapshot.test.js
790790
791791
Snapshot name: \`failing snapshot 1\`
792792
793-
- Snapshot
794-
+ Received
795-
796-
- "bar"
797-
+ "foo"
793+
Snapshot: "bar"
794+
Received: "foo"
798795
799796
9 |
800797
10 | test('failing snapshot', () => {
@@ -819,11 +816,8 @@ FAIL __tests__/snapshotWithHint.test.js
819816
820817
Snapshot name: \`failing snapshot with hint: descriptive hint 1\`
821818
822-
- Snapshot
823-
+ Received
824-
825-
- "bar"
826-
+ "foo"
819+
Snapshot: "bar"
820+
Received: "foo"
827821
828822
9 |
829823
10 | test('failing snapshot with hint', () => {

‎e2e/__tests__/__snapshots__/watchModeUpdateSnapshot.test.ts.snap‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ FAIL __tests__/bar.spec.js
66
● bar
77
expect(received).toMatchSnapshot()
88
Snapshot name: \`bar 1\`
9-
- Snapshot
10-
+ Received
11-
- "foo"
12-
+ "bar"
9+
Snapshot: "foo"
10+
Received: "bar"
1311
1 |
1412
> 2 | test('bar', () => { expect('bar').toMatchSnapshot(); });
1513
| ^

‎e2e/__tests__/toMatchSnapshot.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ test('first snapshot fails, second passes', () => {
108108
writeFiles(TESTS_DIR, {[filename]: template([`'kiwi'`, `'banana'`])});
109109
const {stderr, status} = runJest(DIR, ['-w=1', '--ci=false', filename]);
110110
expect(stderr).toMatch('Snapshot name: `snapshots 1`');
111-
expect(stderr).toMatch('- "apple"\n + "kiwi"');
111+
expect(stderr).toMatch('Snapshot: "apple"\n Received: "kiwi"');
112112
expect(stderr).not.toMatch('1 obsolete snapshot found');
113113
expect(status).toBe(1);
114114
}

‎packages/jest-snapshot/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"chalk": "^2.0.1",
1616
"expect": "^24.8.0",
1717
"jest-diff": "^24.8.0",
18+
"jest-get-type": "^24.8.0",
1819
"jest-matcher-utils": "^24.8.0",
1920
"jest-message-util": "^24.8.0",
2021
"jest-resolve": "^24.8.0",

‎packages/jest-snapshot/src/__tests__/__snapshots__/printDiffOrStringified.test.ts.snap‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`backtick single line expected and received 1`] = `
4+
Snapshot: <g>"var foo = \`backtick\`;"</>
5+
Received: <r>"var foo = <i>tag</i>\`backtick\`;"</>
6+
`;
7+
8+
exports[`empty string expected and received single line 1`] = `
9+
Snapshot: <g>""</>
10+
Received: <r>"single line string"</>
11+
`;
12+
13+
exports[`empty string received and expected multi line 1`] = `
14+
Snapshot: <g>"multi</>
15+
<g>line</>
16+
<g>string"</>
17+
Received: <r>""</>
18+
`;
19+
20+
exports[`escape backslash in multi line string 1`] = `
21+
<g>- Snapshot</>
22+
<r>+ Received</>
23+
24+
<g>- Forward / slash<i> and b</i>ack \\ slash</>
25+
<r>+ Forward / slash</>
26+
<r>+ <i>B</i>ack \\ slash</>
27+
`;
28+
29+
exports[`escape backslash in single line string 1`] = `
30+
Snapshot: <g>"<i>f</i>orward / slash and back \\\\ slash"</>
31+
Received: <r>"<i>F</i>orward / slash and back \\\\ slash"</>
32+
`;
33+
34+
exports[`escape double quote marks in string 1`] = `
35+
Snapshot: <g>"What does \\"<i>oo</i>bleck\\" mean?"</>
36+
Received: <r>"What does \\"<i>ew</i>bleck\\" mean?"</>
37+
`;
38+
39+
exports[`escape regexp 1`] = `
40+
Snapshot: <g>/\\\\\\\\\\("\\)/g</>
41+
Received: <r>/\\\\\\\\\\("\\)/</>
42+
`;
43+
44+
exports[`expand false 1`] = `
45+
<g>- Snapshot</>
46+
<r>+ Received</>
47+
48+
<y>@@ -12,7 +12,9 @@</>
49+
<d> ? "number"</>
50+
<d> : T extends boolean</>
51+
<d> ? "boolean"</>
52+
<d> : T extends undefined</>
53+
<d> ? "undefined"</>
54+
<g>- : T extends Function<i> </i>? "function"<i> </i>: "object";</>
55+
<r>+ : T extends Function</>
56+
<r>+ ? "function"</>
57+
<r>+ : "object";</>
58+
<d> ↵</>
59+
`;
60+
61+
exports[`expand true 1`] = `
62+
<g>- Snapshot</>
63+
<r>+ Received</>
64+
65+
<d> type TypeName<T> =</>
66+
<d> T extends string ? "string" :</>
67+
<d> T extends number ? "number" :</>
68+
<d> T extends boolean ? "boolean" :</>
69+
<d> T extends undefined ? "undefined" :</>
70+
<d> T extends Function ? "function" :</>
71+
<d> "object";</>
72+
<d> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</>
73+
<d> type TypeName<T> = T extends string</>
74+
<d> ? "string"</>
75+
<d> : T extends number</>
76+
<d> ? "number"</>
77+
<d> : T extends boolean</>
78+
<d> ? "boolean"</>
79+
<d> : T extends undefined</>
80+
<d> ? "undefined"</>
81+
<g>- : T extends Function<i> </i>? "function"<i> </i>: "object";</>
82+
<r>+ : T extends Function</>
83+
<r>+ ? "function"</>
84+
<r>+ : "object";</>
85+
<d> ↵</>
86+
`;
87+
88+
exports[`fallback to line diff 1`] = `
89+
<g>- Snapshot</>
90+
<r>+ Received</>
91+
92+
<r>+ ====================================options=====================================</>
93+
<r>+ parsers: ["flow", "typescript"]</>
94+
<r>+ printWidth: 80</>
95+
<r>+ | printWidth</>
96+
<r>+ =====================================input======================================</>
97+
<d> [...a, ...b,];</>
98+
<d> [...a, ...b];</>
99+
<g>- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</>
100+
<r>+ </>
101+
<r>+ =====================================output=====================================</>
102+
<d> [...a, ...b];</>
103+
<d> [...a, ...b];</>
104+
<d> </>
105+
<r>+ ================================================================================</>
106+
`;
107+
108+
exports[`isLineDiffable false boolean 1`] = `
109+
Snapshot: <g>true</>
110+
Received: <r>false</>
111+
`;
112+
113+
exports[`isLineDiffable false number 1`] = `
114+
Snapshot: <g>-0</>
115+
Received: <r>NaN</>
116+
`;
117+
118+
exports[`isLineDiffable true array 1`] = `
119+
<g>- Snapshot</>
120+
<r>+ Received</>
121+
122+
<d> Array [</>
123+
<d> Object {</>
124+
<r>+ "_id": "b14680dec683e744ada1f2fe08614086",</>
125+
<d> "code": 4011,</>
126+
<d> "weight": 2.13,</>
127+
<d> },</>
128+
<d> Object {</>
129+
<r>+ "_id": "7fc63ff01769c4fa7d9279e97e307829",</>
130+
<d> "code": 4019,</>
131+
<d> "count": 4,</>
132+
<d> },</>
133+
<d> ]</>
134+
`;
135+
136+
exports[`isLineDiffable true object 1`] = `
137+
<g>- Snapshot</>
138+
<r>+ Received</>
139+
140+
<d> Object {</>
141+
<d> "props": Object {</>
142+
<g>- "className": "logo",</>
143+
<g>- "src": "/img/jest.png",</>
144+
<r>+ "alt": "Jest logo",</>
145+
<r>+ "class": "logo",</>
146+
<r>+ "src": "/img/jest.svg",</>
147+
<d> },</>
148+
<d> "type": "img",</>
149+
<d> }</>
150+
`;
151+
152+
exports[`isLineDiffable true single line expected and multi line received 1`] = `
153+
<g>- Snapshot</>
154+
<r>+ Received</>
155+
156+
<g>- Array []</>
157+
<r>+ Array [</>
158+
<r>+ 0,</>
159+
<r>+ ]</>
160+
`;
161+
162+
exports[`isLineDiffable true single line expected and received 1`] = `
163+
Snapshot: <g>Array []</>
164+
Received: <r>Object {}</>
165+
`;
166+
167+
exports[`multi line small change in one line and other is unchanged 1`] = `
168+
<g>- Snapshot</>
169+
<r>+ Received</>
170+
171+
<g>- There is no route defined for key <i>'</i>Settings<i>'</i>.</>
172+
<r>+ There is no route defined for key Settings.</>
173+
<d> Must be one of: 'Home'</>
174+
`;
175+
176+
exports[`multi line small changes 1`] = `
177+
<g>- Snapshot</>
178+
<r>+ Received</>
179+
180+
<g>- 6<i>9</i> |·</>
181+
<r>+ 6<i>8</i> |·</>
182+
<g>- <i>70</i> | test('assert.doesNotThrow', () => {</>
183+
<r>+ <i>69</i> | test('assert.doesNotThrow', () => {</>
184+
<g>- > 7<i>1</i> | assert.doesNotThrow(() => {</>
185+
<r>+ > 7<i>0</i> | assert.doesNotThrow(() => {</>
186+
<d> | ^</>
187+
<g>- 7<i>2</i> | throw Error('err!');</>
188+
<r>+ 7<i>1</i> | throw Error('err!');</>
189+
<g>- 7<i>3</i> | });</>
190+
<r>+ 7<i>2</i> | });</>
191+
<g>- 7<i>4</i> | });</>
192+
<r>+ 7<i>3</i> | });</>
193+
<g>- at Object.doesNotThrow (__tests__/assertionError.test.js:7<i>1</i>:10)</>
194+
<r>+ at Object.doesNotThrow (__tests__/assertionError.test.js:7<i>0</i>:10)</>
195+
`;
196+
197+
exports[`single line large changes 1`] = `
198+
Snapshot: <g>"<i>A</i>rray length<i> must be a finite positive integer</i>"</>
199+
Received: <r>"<i>Invalid a</i>rray length"</>
200+
`;
201+
202+
exports[`without serialize backtick single line expected and multi line received 1`] = `
203+
<g>- Snapshot</>
204+
<r>+ Received</>
205+
206+
<g>- var foo = \`backtick\`;</>
207+
<r>+ var foo = \`back</>
208+
<r>+ tick\`;</>
209+
`;
210+
211+
exports[`without serialize backtick single line expected and received 1`] = `
212+
Snapshot: <g>var foo = \`backtick\`;</>
213+
Received: <r>var foo = \`back<i>\${x}</i>tick\`;</>
214+
`;
215+
216+
exports[`without serialize prettier/pull/5590 1`] = `
217+
<g>- Snapshot</>
218+
<r>+ Received</>
219+
220+
<y>@@ -4,8 +4,8 @@</>
221+
<d> | printWidth</>
222+
<d> =====================================input======================================</>
223+
<d> <img src="test.png" alt='John "ShotGun" Nelson'></>
224+
225+
<d> =====================================output=====================================</>
226+
<g>- <img src="test.png" alt=<i>"</i>John <i>&quot;</i>ShotGun<i>&quot;</i> Nelson<i>"</i> /></>
227+
<r>+ <img src="test.png" alt=<i>'</i>John <i>"</i>ShotGun<i>"</i> Nelson<i>'</i> /></>
228+
229+
<d> ================================================================================</>
230+
`;

0 commit comments

Comments
 (0)