maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: use jest-serializer-raw for react-fresh snapshots (#15806)

This commit is contained in:
Simen Bekkhus 2019-06-03 21:46:34 +02:00 committed by Dan Abramov
parent 07da821bfd
commit fa1e8df116
5 changed files with 87 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -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"

11
packages/react-fresh/src/__tests__/ReactFreshBabelPlugin-test.js vendored
View File

@ -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', () => {

142
packages/react-fresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
View File

@ -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");
`;

1
scripts/jest/config.base.js
View File

@ -20,4 +20,5 @@ module.exports = {
roots: ['<rootDir>/packages', '<rootDir>/scripts'],
collectCoverageFrom: ['packages/**/*.js'],
timers: 'fake',
snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
};

5
yarn.lock
View File

@ -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"