chore: use jest-serializer-raw for react-fresh snapshots (#15806)
Simen Bekkhus committed
Jun 3, 2019 at 21:46 UTC
fa1e8df116d835e9d2c41a9bd71b32f91bbfb5ad
5 files changed
+87
-77
package.json
+3
-2
@@ -4,6 +4,7 @@
4
"packages/*"
5
],
6
"devDependencies": {
7
+ "@mattiasbuelens/web-streams-polyfill": "0.1.0",
8
"art": "^0.10.1",
9
"babel-cli": "^6.6.5",
10
"babel-code-frame": "^6.26.0",
@@ -62,6 +63,7 @@
63
"jasmine-check": "^1.0.0-rc.0",
64
"jest": "^23.1.0",
65
"jest-diff": "^23.0.1",
66
+ "jest-snapshot-serializer-raw": "^1.1.0",
67
"minimatch": "^3.0.4",
68
"minimist": "^1.2.0",
69
"mkdirp": "^0.5.1",
@@ -83,8 +85,7 @@
85
"targz": "^1.0.1",
86
"through2": "^2.0.0",
87
"tmp": "~0.0.28",
86
- "typescript": "~1.8.10",
87
- "@mattiasbuelens/web-streams-polyfill": "0.1.0"
88
+ "typescript": "~1.8.10"
89
},
90
"devEngines": {
91
"node": "8.x || 9.x || 10.x || 11.x || 12.x"
packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
+7
-4
@@ -8,13 +8,16 @@
8
'use strict';
9
10
let babel = require('babel-core');
11
+let {wrap} = require('jest-snapshot-serializer-raw');
12
let freshPlugin = require('react-fresh/babel');
13
14
function transform(input, options = {}) {
14
- return babel.transform(input, {
15
- babelrc: false,
16
- plugins: ['syntax-jsx', freshPlugin],
17
- }).code;
15
+ return wrap(
16
+ babel.transform(input, {
17
+ babelrc: false,
18
+ plugins: ['syntax-jsx', freshPlugin],
19
+ }).code,
20
+ );
21
}
22
23
describe('ReactFreshBabelPlugin', () => {
packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+71
-71
@@ -1,63 +1,63 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
exports[`ReactFreshBabelPlugin generates signatures for function declarations calling hooks 1`] = `
4
-"
4
+
5
export default function App() {
6
const [foo, setFoo] = useState(0);
7
React.useEffect(() => {});
8
return <h1>{foo}</h1>;
9
}
10
11
-__signature__(App, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
11
+__signature__(App, "useState{[foo, setFoo]}\\nuseEffect{}");
12
13
_c = App;
14
15
var _c;
16
17
-__register__(_c, \\"App\\");"
17
+__register__(_c, "App");
18
`;
19
20
exports[`ReactFreshBabelPlugin generates signatures for function expressions calling hooks 1`] = `
21
-"
21
+
22
export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = __signature__((props, ref) => {
23
const [foo, setFoo] = useState(0);
24
React.useEffect(() => {});
25
return <h1 ref={ref}>{foo}</h1>;
26
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
26
+}, "useState{[foo, setFoo]}\\nuseEffect{}")));
27
28
export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = __signature__(function (props, ref) {
29
const [foo, setFoo] = useState(0);
30
React.useEffect(() => {});
31
return <h1 ref={ref}>{foo}</h1>;
32
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
32
+}, "useState{[foo, setFoo]}\\nuseEffect{}")));
33
34
function hoc() {
35
return __signature__(function Inner() {
36
const [foo, setFoo] = useState(0);
37
React.useEffect(() => {});
38
return <h1 ref={ref}>{foo}</h1>;
39
- }, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
39
+ }, "useState{[foo, setFoo]}\\nuseEffect{}");
40
}
41
42
export let C = hoc();
43
44
var _c, _c2, _c3, _c4, _c5, _c6;
45
46
-__register__(_c, \\"A$React.memo$React.forwardRef\\");
46
+__register__(_c, "A$React.memo$React.forwardRef");
47
48
-__register__(_c2, \\"A$React.memo\\");
48
+__register__(_c2, "A$React.memo");
49
50
-__register__(_c3, \\"A\\");
50
+__register__(_c3, "A");
51
52
-__register__(_c4, \\"B$React.memo$React.forwardRef\\");
52
+__register__(_c4, "B$React.memo$React.forwardRef");
53
54
-__register__(_c5, \\"B$React.memo\\");
54
+__register__(_c5, "B$React.memo");
55
56
-__register__(_c6, \\"B\\");"
56
+__register__(_c6, "B");
57
`;
58
59
exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = `
60
-"
60
+
61
let connect = () => {
62
function Comp() {
63
const handleClick = () => {};
@@ -70,11 +70,11 @@ function withRouter() {
70
const handleClick = () => {};
71
return <h1 onClick={handleClick}>Hi</h1>;
72
};
73
-};"
73
+};
74
`;
75
76
exports[`ReactFreshBabelPlugin ignores complex definitions 1`] = `
77
-"
77
+
78
let A = foo ? () => {
79
return <h1>Hi</h1>;
80
} : null;
@@ -86,11 +86,11 @@ let C = () => () => {
86
};
87
let D = bar && (() => {
88
return <h1>Hi</h1>;
89
-});"
89
+});
90
`;
91
92
exports[`ReactFreshBabelPlugin ignores higher-order functions that are not HOCs 1`] = `
93
-"
93
+
94
const throttledAlert = throttle(function () {
95
alert('Hi');
96
});
@@ -99,53 +99,53 @@ const TooComplex = function () {
99
}(() => {});
100
if (cond) {
101
const Foo = thing(() => {});
102
-}"
102
+}
103
`;
104
105
exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `
106
-"
107
-export default function () {}"
106
+
107
+export default function () {}
108
`;
109
110
exports[`ReactFreshBabelPlugin includes custom hooks into the signatures 1`] = `
111
-"
111
+
112
function useFancyState() {
113
const [foo, setFoo] = React.useState(0);
114
useFancyEffect();
115
return foo;
116
}
117
118
-__signature__(useFancyState, \\"useState{[foo, setFoo]}\\\\nuseFancyEffect{}\\", () => [useFancyEffect]);
118
+__signature__(useFancyState, "useState{[foo, setFoo]}\\nuseFancyEffect{}", () => [useFancyEffect]);
119
120
const useFancyEffect = () => {
121
React.useEffect(() => {});
122
};
123
124
-__signature__(useFancyEffect, \\"useEffect{}\\");
124
+__signature__(useFancyEffect, "useEffect{}");
125
126
export default function App() {
127
const bar = useFancyState();
128
return <h1>{bar}</h1>;
129
}
130
131
-__signature__(App, \\"useFancyState{bar}\\", () => [useFancyState]);
131
+__signature__(App, "useFancyState{bar}", () => [useFancyState]);
132
133
_c = App;
134
135
var _c;
136
137
-__register__(_c, \\"App\\");"
137
+__register__(_c, "App");
138
`;
139
140
exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
141
-"
141
+
142
function hello() {
143
return 2 * 2;
144
-}"
144
+}
145
`;
146
147
exports[`ReactFreshBabelPlugin registers capitalized identifiers in HOC calls 1`] = `
148
-"
148
+
149
function Foo() {
150
return <h1>Hi</h1>;
151
}
@@ -157,17 +157,17 @@ const B = _c4 = hoc(Foo);
157
158
var _c, _c2, _c3, _c4;
159
160
-__register__(_c, \\"Foo\\");
160
+__register__(_c, "Foo");
161
162
-__register__(_c2, \\"%default%\\");
162
+__register__(_c2, "%default%");
163
164
-__register__(_c3, \\"A\\");
164
+__register__(_c3, "A");
165
166
-__register__(_c4, \\"B\\");"
166
+__register__(_c4, "B");
167
`;
168
169
exports[`ReactFreshBabelPlugin registers identifiers used in JSX at definition site 1`] = `
170
-"
170
+
171
import A from './A';
172
import Store from './Store';
173
@@ -198,11 +198,11 @@ __register__(_c2, 'Foo');
198
199
__register__(_c3, 'B');
200
201
-__register__(_c4, 'NotAComponent');"
201
+__register__(_c4, 'NotAComponent');
202
`;
203
204
exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = `
205
-"
205
+
206
import A from './A';
207
import Store from './Store';
208
@@ -235,11 +235,11 @@ __register__(_c2, 'Foo');
235
236
__register__(_c3, 'B');
237
238
-__register__(_c4, 'NotAComponent');"
238
+__register__(_c4, 'NotAComponent');
239
`;
240
241
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
242
-"
242
+
243
const A = _c2 = forwardRef(_c = function () {
244
return <h1>Foo</h1>;
245
});
@@ -252,55 +252,55 @@ export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
252
253
var _c, _c2, _c3, _c4, _c5, _c6, _c7, _c8;
254
255
-__register__(_c, \\"A$forwardRef\\");
255
+__register__(_c, "A$forwardRef");
256
257
-__register__(_c2, \\"A\\");
257
+__register__(_c2, "A");
258
259
-__register__(_c3, \\"B$memo$React.forwardRef\\");
259
+__register__(_c3, "B$memo$React.forwardRef");
260
261
-__register__(_c4, \\"B$memo\\");
261
+__register__(_c4, "B$memo");
262
263
-__register__(_c5, \\"B\\");
263
+__register__(_c5, "B");
264
265
-__register__(_c6, \\"%default%$React.memo$forwardRef\\");
265
+__register__(_c6, "%default%$React.memo$forwardRef");
266
267
-__register__(_c7, \\"%default%$React.memo\\");
267
+__register__(_c7, "%default%$React.memo");
268
269
-__register__(_c8, \\"%default%\\");"
269
+__register__(_c8, "%default%");
270
`;
271
272
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 2`] = `
273
-"
273
+
274
export default _c3 = React.memo(_c2 = forwardRef(_c = function (props, ref) {
275
return <h1>Foo</h1>;
276
}));
277
278
var _c, _c2, _c3;
279
280
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
280
+__register__(_c, "%default%$React.memo$forwardRef");
281
282
-__register__(_c2, \\"%default%$React.memo\\");
282
+__register__(_c2, "%default%$React.memo");
283
284
-__register__(_c3, \\"%default%\\");"
284
+__register__(_c3, "%default%");
285
`;
286
287
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 3`] = `
288
-"
288
+
289
export default _c3 = React.memo(_c2 = forwardRef(_c = function Named(props, ref) {
290
return <h1>Foo</h1>;
291
}));
292
293
var _c, _c2, _c3;
294
295
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
295
+__register__(_c, "%default%$React.memo$forwardRef");
296
297
-__register__(_c2, \\"%default%$React.memo\\");
297
+__register__(_c2, "%default%$React.memo");
298
299
-__register__(_c3, \\"%default%\\");"
299
+__register__(_c3, "%default%");
300
`;
301
302
exports[`ReactFreshBabelPlugin registers top-level exported function declarations 1`] = `
303
-"
303
+
304
export function Hello() {
305
function handleClick() {}
306
return <h1 onClick={handleClick}>Hi</h1>;
@@ -329,11 +329,11 @@ __register__(_c, 'Hello');
329
330
__register__(_c2, 'Bar');
331
332
-__register__(_c3, 'Baz');"
332
+__register__(_c3, 'Baz');
333
`;
334
335
exports[`ReactFreshBabelPlugin registers top-level exported named arrow functions 1`] = `
336
-"
336
+
337
export const Hello = () => {
338
function handleClick() {}
339
return <h1 onClick={handleClick}>Hi</h1>;
@@ -351,13 +351,13 @@ export default (() => {
351
352
var _c, _c2;
353
354
-__register__(_c, \\"Hello\\");
354
+__register__(_c, "Hello");
355
356
-__register__(_c2, \\"Bar\\");"
356
+__register__(_c2, "Bar");
357
`;
358
359
exports[`ReactFreshBabelPlugin registers top-level function declarations 1`] = `
360
-"
360
+
361
function Hello() {
362
function handleClick() {}
363
return <h1 onClick={handleClick}>Hi</h1>;
@@ -371,13 +371,13 @@ _c2 = Bar;
371
372
var _c, _c2;
373
374
-__register__(_c, \\"Hello\\");
374
+__register__(_c, "Hello");
375
376
-__register__(_c2, \\"Bar\\");"
376
+__register__(_c2, "Bar");
377
`;
378
379
exports[`ReactFreshBabelPlugin registers top-level variable declarations with arrow functions 1`] = `
380
-"
380
+
381
let Hello = () => {
382
const handleClick = () => {};
383
return <h1 onClick={handleClick}>Hi</h1>;
@@ -393,15 +393,15 @@ var sum = () => {};
393
394
var _c, _c2, _c3;
395
396
-__register__(_c, \\"Hello\\");
396
+__register__(_c, "Hello");
397
398
-__register__(_c2, \\"Bar\\");
398
+__register__(_c2, "Bar");
399
400
-__register__(_c3, \\"Baz\\");"
400
+__register__(_c3, "Baz");
401
`;
402
403
exports[`ReactFreshBabelPlugin registers top-level variable declarations with function expressions 1`] = `
404
-"
404
+
405
let Hello = function () {
406
function handleClick() {}
407
return <h1 onClick={handleClick}>Hi</h1>;
@@ -417,13 +417,13 @@ var Qux;
417
418
var _c, _c2;
419
420
-__register__(_c, \\"Hello\\");
420
+__register__(_c, "Hello");
421
422
-__register__(_c2, \\"Bar\\");"
422
+__register__(_c2, "Bar");
423
`;
424
425
exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
426
-"
426
+
427
function Hello() {
428
return <h1>Hi</h1>;
429
}
@@ -432,5 +432,5 @@ Hello = connect(Hello);
432
433
var _c;
434
435
-__register__(_c, \\"Hello\\");"
435
+__register__(_c, "Hello");
436
`;
scripts/jest/config.base.js
+1
@@ -20,4 +20,5 @@ module.exports = {
20
roots: ['<rootDir>/packages', '<rootDir>/scripts'],
21
collectCoverageFrom: ['packages/**/*.js'],
22
timers: 'fake',
23
+ snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
24
};
yarn.lock
+5
@@ -3125,6 +3125,11 @@ jest-serializer@^23.0.1:
3125
version "23.0.1"
3126
resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"
3127
3128
+jest-snapshot-serializer-raw@^1.1.0:
3129
+ version "1.1.0"
3130
+ resolved "https://registry.yarnpkg.com/jest-snapshot-serializer-raw/-/jest-snapshot-serializer-raw-1.1.0.tgz#1d7f09c02f3dbbc3ae70b5b7598fb2f45e37d6c8"
3131
+ integrity sha512-OL3bXRCnSn7Kur3YTGYj+A3Hwh2eyb5QL5VLQ9OSsPBOva7r3sCB0Jf1rOT/KN3ypzH42hrkDz96lpbiMo+AlQ==
3132
+
3133
jest-snapshot@^23.0.1:
3134
version "23.0.1"
3135
resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.0.1.tgz#6674fa19b9eb69a99cabecd415bddc42d6af3e7e"