From 78412363481ee87a3b78d1b283a842efb00ddc26 Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Mon, 3 Jun 2019 15:36:18 +0200
Subject: [PATCH] chore: use jest-serializer-raw for react-fresh snapshots

---
 package.json                                  |   5 +-
 .../__tests__/ReactFreshBabelPlugin-test.js   |  11 +-
 .../ReactFreshBabelPlugin-test.js.snap        | 142 +++++++++---------
 scripts/jest/config.base.js                   |   1 +
 yarn.lock                                     |   5 +
 5 files changed, 87 insertions(+), 77 deletions(-)

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 <h1>{foo}</h1>;
 }
 
-__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 <h1 ref={ref}>{foo}</h1>;
-}, \\"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 <h1 ref={ref}>{foo}</h1>;
-}, \\"useState{[foo, setFoo]}\\\\nuseEffect{}\\")));
+}, "useState{[foo, setFoo]}\\nuseEffect{}")));
 
 function hoc() {
   return __signature__(function Inner() {
     const [foo, setFoo] = useState(0);
     React.useEffect(() => {});
     return <h1 ref={ref}>{foo}</h1>;
-  }, \\"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 <h1 onClick={handleClick}>Hi</h1>;
   };
-};"
+};
 `;
 
 exports[`ReactFreshBabelPlugin ignores complex definitions 1`] = `
-"
+
 let A = foo ? () => {
   return <h1>Hi</h1>;
 } : null;
@@ -86,11 +86,11 @@ let C = () => () => {
 };
 let D = bar && (() => {
   return <h1>Hi</h1>;
-});"
+});
 `;
 
 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 <h1>{bar}</h1>;
 }
 
-__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 <h1>Hi</h1>;
 }
@@ -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 <h1>Foo</h1>;
 });
@@ -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 <h1>Foo</h1>;
 }));
 
 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 <h1>Foo</h1>;
 }));
 
 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 <h1 onClick={handleClick}>Hi</h1>;
@@ -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 <h1 onClick={handleClick}>Hi</h1>;
@@ -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 <h1 onClick={handleClick}>Hi</h1>;
@@ -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 <h1 onClick={handleClick}>Hi</h1>;
@@ -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 <h1 onClick={handleClick}>Hi</h1>;
@@ -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 <h1>Hi</h1>;
 }
@@ -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: ['<rootDir>/packages', '<rootDir>/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"