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..726df24ea5645 100644 --- a/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js +++ b/packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js @@ -9,12 +9,15 @@ let babel = require('babel-core'); let freshPlugin = require('react-fresh/babel'); +let {wrap} = require('jest-snapshot-serializer-raw'); 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"