Skip to content

Commit ba5f146

Browse files
SimenBAndarist
SimenB
and
Andarist
authored
Make snapshots more readable (emotion-js#2733)
* chore: do not escape strings in snapshots * Update jest.config.js Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * update again * react 18 Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
1 parent 409b237 commit ba5f146

File tree

46 files changed

+1829
-1825
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1829
-1825
lines changed

‎jest.config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,9 @@ module.exports = {
1717
coveragePathIgnorePatterns: [
1818
'/node_modules/',
1919
'<rootDir>/packages/babel-plugin/test/util.js'
20-
]
20+
],
21+
snapshotFormat: {
22+
escapeString: false,
23+
printBasicPrototype: false
24+
}
2125
}

‎packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import 'react-app-polyfill/stable';
2020
import React from 'react';
2121
import ReactDOM from 'react-dom';
2222
import App from './App';
23-
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
23+
import { jsx as ___EmotionJSX } from "@emotion/react";
2424
ReactDOM.render(<App />, document.getElementById('root'));"
2525
`;
2626

@@ -33,7 +33,7 @@ const F = () => <></>
3333
↓ ↓ ↓ ↓ ↓ ↓
3434
3535
import * as React from 'react';
36-
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
36+
import { jsx as ___EmotionJSX } from "@emotion/react";
3737
3838
const F = () => <></>;"
3939
`;
@@ -47,7 +47,7 @@ const P = () => <p />
4747
↓ ↓ ↓ ↓ ↓ ↓
4848
4949
import * as React from 'react';
50-
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
50+
import { jsx as ___EmotionJSX } from "@emotion/react";
5151
5252
const P = () => <p />;"
5353
`;

‎packages/babel-plugin/__tests__/__snapshots__/css-requires-options.js.snap

+71-71
Large diffs are not rendered by default.

‎packages/babel-plugin/__tests__/__snapshots__/css.js.snap

+205-205
Large diffs are not rendered by default.

‎packages/babel-plugin/__tests__/__snapshots__/global-requires-options.js.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ export default () => <Global styles={{ color: 'hotpink' }} />
1010
1111
↓ ↓ ↓ ↓ ↓ ↓
1212
13-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
13+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
1414
1515
import * as React from 'react';
1616
import { Global } from '@emotion/react';
1717
18-
var _ref = process.env.NODE_ENV === \\"production\\" ? {
19-
name: \\"3sn2xs\\",
20-
styles: \\"color:hotpink\\"
18+
var _ref = process.env.NODE_ENV === "production" ? {
19+
name: "3sn2xs",
20+
styles: "color:hotpink"
2121
} : {
22-
name: \\"3sn2xs\\",
23-
styles: \\"color:hotpink\\",
22+
name: "3sn2xs",
23+
styles: "color:hotpink",
2424
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
2525
};
2626

‎packages/babel-plugin/__tests__/__snapshots__/global.js.snap

+31-31
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ export default () => (
1111
1212
↓ ↓ ↓ ↓ ↓ ↓
1313
14-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
14+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
1515
1616
import * as React from 'react';
1717
import { Global } from '@emotion/react';
1818
19-
var _ref = process.env.NODE_ENV === \\"production\\" ? {
20-
name: \\"9aoaei\\",
21-
styles: \\"color:hotpink;background-color:#fff\\"
19+
var _ref = process.env.NODE_ENV === "production" ? {
20+
name: "9aoaei",
21+
styles: "color:hotpink;background-color:#fff"
2222
} : {
23-
name: \\"9aoaei\\",
24-
styles: \\"color:hotpink;background-color:#fff\\",
25-
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */\\",
23+
name: "9aoaei",
24+
styles: "color:hotpink;background-color:#fff",
25+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */",
2626
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
2727
};
2828
@@ -38,18 +38,18 @@ export default () => <Global styles={{ color: 'hotpink' }} />
3838
3939
↓ ↓ ↓ ↓ ↓ ↓
4040
41-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
41+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
4242
4343
import * as React from 'react';
4444
import { Global } from '@emotion/react';
4545
46-
var _ref = process.env.NODE_ENV === \\"production\\" ? {
47-
name: \\"3sn2xs\\",
48-
styles: \\"color:hotpink\\"
46+
var _ref = process.env.NODE_ENV === "production" ? {
47+
name: "3sn2xs",
48+
styles: "color:hotpink"
4949
} : {
50-
name: \\"3sn2xs\\",
51-
styles: \\"color:hotpink\\",
52-
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
50+
name: "3sn2xs",
51+
styles: "color:hotpink",
52+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */",
5353
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
5454
};
5555
@@ -74,7 +74,7 @@ const getBgColor = () => ({
7474
backgroundColor: '#fff'
7575
});
7676
77-
export default (() => <Global styles={[\\"color:hotpink;\\", getBgColor(), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBnZXRCZ0NvbG9yID0gKCkgPT4gKHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfSlcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e1t7IGNvbG9yOiAnaG90cGluaycgfSwgZ2V0QmdDb2xvcigpXX0gLz5cbiJdfQ== */\\"]} />);"
77+
export default (() => <Global styles={["color:hotpink;", getBgColor(), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBnZXRCZ0NvbG9yID0gKCkgPT4gKHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfSlcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e1t7IGNvbG9yOiAnaG90cGluaycgfSwgZ2V0QmdDb2xvcigpXX0gLz5cbiJdfQ== */"]} />);"
7878
`;
7979

8080
exports[`emotion-babel-plugin Global complex-obj 1`] = `
@@ -88,7 +88,7 @@ export default () => <Global styles={{ color: 'hotpink', ...getBgColor() }} />
8888
8989
↓ ↓ ↓ ↓ ↓ ↓
9090
91-
import { css as _css } from \\"@emotion/react\\";
91+
import { css as _css } from "@emotion/react";
9292
import * as React from 'react';
9393
import { Global } from '@emotion/react';
9494
@@ -99,7 +99,7 @@ const getBgColor = () => ({
9999
export default (() => <Global styles={/*#__PURE__*/_css({
100100
color: 'hotpink',
101101
...getBgColor()
102-
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtb2JqLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJjb21wbGV4LW9iai5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnLCAuLi5nZXRCZ0NvbG9yKCkgfX0gLz5cbiJdfQ== */\\")} />);"
102+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtb2JqLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJjb21wbGV4LW9iai5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnLCAuLi5nZXRCZ0NvbG9yKCkgfX0gLz5cbiJdfQ== */")} />);"
103103
`;
104104

105105
exports[`emotion-babel-plugin Global css-used-as-value 1`] = `
@@ -112,18 +112,18 @@ export default () => <Global styles={css({ color: 'hotpink' })} />
112112
113113
↓ ↓ ↓ ↓ ↓ ↓
114114
115-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
115+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
116116
117117
import * as React from 'react';
118118
import { Global, css } from '@emotion/react'; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something
119119
120-
var _ref = process.env.NODE_ENV === \\"production\\" ? {
121-
name: \\"3sn2xs\\",
122-
styles: \\"color:hotpink\\"
120+
var _ref = process.env.NODE_ENV === "production" ? {
121+
name: "3sn2xs",
122+
styles: "color:hotpink"
123123
} : {
124-
name: \\"3sn2xs\\",
125-
styles: \\"color:hotpink\\",
126-
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */\\",
124+
name: "3sn2xs",
125+
styles: "color:hotpink",
126+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */",
127127
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
128128
};
129129
@@ -185,19 +185,19 @@ export default () => <Global styles={{ color: 'hotpink' }}></Global>
185185
186186
↓ ↓ ↓ ↓ ↓ ↓
187187
188-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
188+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
189189
190190
/* eslint-disable */
191191
import * as React from 'react';
192192
import { Global } from '@emotion/react'; // prettier-ignore
193193
194-
var _ref = process.env.NODE_ENV === \\"production\\" ? {
195-
name: \\"3sn2xs\\",
196-
styles: \\"color:hotpink\\"
194+
var _ref = process.env.NODE_ENV === "production" ? {
195+
name: "3sn2xs",
196+
styles: "color:hotpink"
197197
} : {
198-
name: \\"3sn2xs\\",
199-
styles: \\"color:hotpink\\",
200-
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */\\",
198+
name: "3sn2xs",
199+
styles: "color:hotpink",
200+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */",
201201
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
202202
};
203203

0 commit comments

Comments
 (0)