diff --git a/package.json b/package.json
index b09bc1df76931..965a869883cf5 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"packages/*"
],
"devDependencies": {
+ "@mattiasbuelens/web-streams-polyfill": "0.1.0",
"art": "^0.10.1",
"babel-cli": "^6.6.5",
"babel-code-frame": "^6.26.0",
@@ -62,6 +63,7 @@
"jasmine-check": "^1.0.0-rc.0",
"jest": "^23.1.0",
"jest-diff": "^23.0.1",
+ "jest-snapshot-serializer-raw": "^1.1.0",
"minimatch": "^3.0.4",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
@@ -83,8 +85,7 @@
"targz": "^1.0.1",
"through2": "^2.0.0",
"tmp": "~0.0.28",
- "typescript": "~1.8.10",
- "@mattiasbuelens/web-streams-polyfill": "0.1.0"
+ "typescript": "~1.8.10"
},
"devEngines": {
"node": "8.x || 9.x || 10.x || 11.x || 12.x"
diff --git a/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
index e5eb1db316f5b..e75faa766c57c 100644
--- a/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -8,13 +8,16 @@
'use strict';
let babel = require('babel-core');
+let {wrap} = require('jest-snapshot-serializer-raw');
let freshPlugin = require('react-fresh/babel');
function transform(input, options = {}) {
- return babel.transform(input, {
- babelrc: false,
- plugins: ['syntax-jsx', freshPlugin],
- }).code;
+ return wrap(
+ babel.transform(input, {
+ babelrc: false,
+ plugins: ['syntax-jsx', freshPlugin],
+ }).code,
+ );
}
describe('ReactFreshBabelPlugin', () => {
diff --git a/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 52abe647466d9..fba2c9cff1d72 100644
--- a/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -1,63 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReactFreshBabelPlugin generates signatures for function declarations calling hooks 1`] = `
-"
+
export default function App() {
const [foo, setFoo] = useState(0);
React.useEffect(() => {});
return
{foo}
;
}
-__signature__(App, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
+__signature__(App, "useState{[foo, setFoo]}\\nuseEffect{}");
_c = App;
var _c;
-__register__(_c, \\"App\\");"
+__register__(_c, "App");
`;
exports[`ReactFreshBabelPlugin generates signatures for function expressions calling hooks 1`] = `
-"
+
export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = __signature__((props, ref) => {
const [foo, setFoo] = useState(0);
React.useEffect(() => {});
return {foo}
;
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
+}, "useState{[foo, setFoo]}\\nuseEffect{}")));
export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = __signature__(function (props, ref) {
const [foo, setFoo] = useState(0);
React.useEffect(() => {});
return {foo}
;
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
+}, "useState{[foo, setFoo]}\\nuseEffect{}")));
function hoc() {
return __signature__(function Inner() {
const [foo, setFoo] = useState(0);
React.useEffect(() => {});
return {foo}
;
- }, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\");
+ }, "useState{[foo, setFoo]}\\nuseEffect{}");
}
export let C = hoc();
var _c, _c2, _c3, _c4, _c5, _c6;
-__register__(_c, \\"A$React.memo$React.forwardRef\\");
+__register__(_c, "A$React.memo$React.forwardRef");
-__register__(_c2, \\"A$React.memo\\");
+__register__(_c2, "A$React.memo");
-__register__(_c3, \\"A\\");
+__register__(_c3, "A");
-__register__(_c4, \\"B$React.memo$React.forwardRef\\");
+__register__(_c4, "B$React.memo$React.forwardRef");
-__register__(_c5, \\"B$React.memo\\");
+__register__(_c5, "B$React.memo");
-__register__(_c6, \\"B\\");"
+__register__(_c6, "B");
`;
exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = `
-"
+
let connect = () => {
function Comp() {
const handleClick = () => {};
@@ -70,11 +70,11 @@ function withRouter() {
const handleClick = () => {};
return Hi
;
};
-};"
+};
`;
exports[`ReactFreshBabelPlugin ignores complex definitions 1`] = `
-"
+
let A = foo ? () => {
return Hi
;
} : null;
@@ -86,11 +86,11 @@ let C = () => () => {
};
let D = bar && (() => {
return Hi
;
-});"
+});
`;
exports[`ReactFreshBabelPlugin ignores higher-order functions that are not HOCs 1`] = `
-"
+
const throttledAlert = throttle(function () {
alert('Hi');
});
@@ -99,53 +99,53 @@ const TooComplex = function () {
}(() => {});
if (cond) {
const Foo = thing(() => {});
-}"
+}
`;
exports[`ReactFreshBabelPlugin ignores unnamed function declarations 1`] = `
-"
-export default function () {}"
+
+export default function () {}
`;
exports[`ReactFreshBabelPlugin includes custom hooks into the signatures 1`] = `
-"
+
function useFancyState() {
const [foo, setFoo] = React.useState(0);
useFancyEffect();
return foo;
}
-__signature__(useFancyState, \\"useState{[foo, setFoo]}\\\\nuseFancyEffect{}\\", () => [useFancyEffect]);
+__signature__(useFancyState, "useState{[foo, setFoo]}\\nuseFancyEffect{}", () => [useFancyEffect]);
const useFancyEffect = () => {
React.useEffect(() => {});
};
-__signature__(useFancyEffect, \\"useEffect{}\\");
+__signature__(useFancyEffect, "useEffect{}");
export default function App() {
const bar = useFancyState();
return {bar}
;
}
-__signature__(App, \\"useFancyState{bar}\\", () => [useFancyState]);
+__signature__(App, "useFancyState{bar}", () => [useFancyState]);
_c = App;
var _c;
-__register__(_c, \\"App\\");"
+__register__(_c, "App");
`;
exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
-"
+
function hello() {
return 2 * 2;
-}"
+}
`;
exports[`ReactFreshBabelPlugin registers capitalized identifiers in HOC calls 1`] = `
-"
+
function Foo() {
return Hi
;
}
@@ -157,17 +157,17 @@ const B = _c4 = hoc(Foo);
var _c, _c2, _c3, _c4;
-__register__(_c, \\"Foo\\");
+__register__(_c, "Foo");
-__register__(_c2, \\"%default%\\");
+__register__(_c2, "%default%");
-__register__(_c3, \\"A\\");
+__register__(_c3, "A");
-__register__(_c4, \\"B\\");"
+__register__(_c4, "B");
`;
exports[`ReactFreshBabelPlugin registers identifiers used in JSX at definition site 1`] = `
-"
+
import A from './A';
import Store from './Store';
@@ -198,11 +198,11 @@ __register__(_c2, 'Foo');
__register__(_c3, 'B');
-__register__(_c4, 'NotAComponent');"
+__register__(_c4, 'NotAComponent');
`;
exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = `
-"
+
import A from './A';
import Store from './Store';
@@ -235,11 +235,11 @@ __register__(_c2, 'Foo');
__register__(_c3, 'B');
-__register__(_c4, 'NotAComponent');"
+__register__(_c4, 'NotAComponent');
`;
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
-"
+
const A = _c2 = forwardRef(_c = function () {
return Foo
;
});
@@ -252,55 +252,55 @@ export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
var _c, _c2, _c3, _c4, _c5, _c6, _c7, _c8;
-__register__(_c, \\"A$forwardRef\\");
+__register__(_c, "A$forwardRef");
-__register__(_c2, \\"A\\");
+__register__(_c2, "A");
-__register__(_c3, \\"B$memo$React.forwardRef\\");
+__register__(_c3, "B$memo$React.forwardRef");
-__register__(_c4, \\"B$memo\\");
+__register__(_c4, "B$memo");
-__register__(_c5, \\"B\\");
+__register__(_c5, "B");
-__register__(_c6, \\"%default%$React.memo$forwardRef\\");
+__register__(_c6, "%default%$React.memo$forwardRef");
-__register__(_c7, \\"%default%$React.memo\\");
+__register__(_c7, "%default%$React.memo");
-__register__(_c8, \\"%default%\\");"
+__register__(_c8, "%default%");
`;
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 2`] = `
-"
+
export default _c3 = React.memo(_c2 = forwardRef(_c = function (props, ref) {
return Foo
;
}));
var _c, _c2, _c3;
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
+__register__(_c, "%default%$React.memo$forwardRef");
-__register__(_c2, \\"%default%$React.memo\\");
+__register__(_c2, "%default%$React.memo");
-__register__(_c3, \\"%default%\\");"
+__register__(_c3, "%default%");
`;
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 3`] = `
-"
+
export default _c3 = React.memo(_c2 = forwardRef(_c = function Named(props, ref) {
return Foo
;
}));
var _c, _c2, _c3;
-__register__(_c, \\"%default%$React.memo$forwardRef\\");
+__register__(_c, "%default%$React.memo$forwardRef");
-__register__(_c2, \\"%default%$React.memo\\");
+__register__(_c2, "%default%$React.memo");
-__register__(_c3, \\"%default%\\");"
+__register__(_c3, "%default%");
`;
exports[`ReactFreshBabelPlugin registers top-level exported function declarations 1`] = `
-"
+
export function Hello() {
function handleClick() {}
return Hi
;
@@ -329,11 +329,11 @@ __register__(_c, 'Hello');
__register__(_c2, 'Bar');
-__register__(_c3, 'Baz');"
+__register__(_c3, 'Baz');
`;
exports[`ReactFreshBabelPlugin registers top-level exported named arrow functions 1`] = `
-"
+
export const Hello = () => {
function handleClick() {}
return Hi
;
@@ -351,13 +351,13 @@ export default (() => {
var _c, _c2;
-__register__(_c, \\"Hello\\");
+__register__(_c, "Hello");
-__register__(_c2, \\"Bar\\");"
+__register__(_c2, "Bar");
`;
exports[`ReactFreshBabelPlugin registers top-level function declarations 1`] = `
-"
+
function Hello() {
function handleClick() {}
return Hi
;
@@ -371,13 +371,13 @@ _c2 = Bar;
var _c, _c2;
-__register__(_c, \\"Hello\\");
+__register__(_c, "Hello");
-__register__(_c2, \\"Bar\\");"
+__register__(_c2, "Bar");
`;
exports[`ReactFreshBabelPlugin registers top-level variable declarations with arrow functions 1`] = `
-"
+
let Hello = () => {
const handleClick = () => {};
return Hi
;
@@ -393,15 +393,15 @@ var sum = () => {};
var _c, _c2, _c3;
-__register__(_c, \\"Hello\\");
+__register__(_c, "Hello");
-__register__(_c2, \\"Bar\\");
+__register__(_c2, "Bar");
-__register__(_c3, \\"Baz\\");"
+__register__(_c3, "Baz");
`;
exports[`ReactFreshBabelPlugin registers top-level variable declarations with function expressions 1`] = `
-"
+
let Hello = function () {
function handleClick() {}
return Hi
;
@@ -417,13 +417,13 @@ var Qux;
var _c, _c2;
-__register__(_c, \\"Hello\\");
+__register__(_c, "Hello");
-__register__(_c2, \\"Bar\\");"
+__register__(_c2, "Bar");
`;
exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
-"
+
function Hello() {
return Hi
;
}
@@ -432,5 +432,5 @@ Hello = connect(Hello);
var _c;
-__register__(_c, \\"Hello\\");"
+__register__(_c, "Hello");
`;
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
index d3436e1ea4173..65e3cdf05f9c3 100644
--- a/scripts/jest/config.base.js
+++ b/scripts/jest/config.base.js
@@ -20,4 +20,5 @@ module.exports = {
roots: ['/packages', '/scripts'],
collectCoverageFrom: ['packages/**/*.js'],
timers: 'fake',
+ snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
};
diff --git a/yarn.lock b/yarn.lock
index d1417acf58c86..56a8a7287fa7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3125,6 +3125,11 @@ jest-serializer@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165"
+jest-snapshot-serializer-raw@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/jest-snapshot-serializer-raw/-/jest-snapshot-serializer-raw-1.1.0.tgz#1d7f09c02f3dbbc3ae70b5b7598fb2f45e37d6c8"
+ integrity sha512-OL3bXRCnSn7Kur3YTGYj+A3Hwh2eyb5QL5VLQ9OSsPBOva7r3sCB0Jf1rOT/KN3ypzH42hrkDz96lpbiMo+AlQ==
+
jest-snapshot@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.0.1.tgz#6674fa19b9eb69a99cabecd415bddc42d6af3e7e"