Skip to content

Commit b5488fa

Browse files
christiansanychristiansany
authored
Merge pull request #375 from jantimon/feature/serializerOptions
Add snapshot options
2 parents f9f9465 + f1819f5 commit b5488fa

File tree

7 files changed

+233
-6
lines changed

7 files changed

+233
-6
lines changed

‎README.md‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,26 @@ test('it works', () => {
344344
const tree = renderer.create(<Button />).toJSON()
345345
expect(tree).toMatchSpecificSnapshot("./Button.snap")
346346
})
347-
````
347+
```
348+
349+
## Serializer Options
350+
351+
The serializer can be configured to control the snapshot output.
352+
353+
```js
354+
import { render } from '@testing-library/react'
355+
import { setStyleSheetSerializerOptions } from 'jest-styled-components/serializer'
356+
357+
setStyleSheetSerializerOptions({
358+
addStyles: false,
359+
classNameFormatter: (index) => `styled${index}`
360+
});
361+
362+
test('it works', () => {
363+
const { container } = render(<Button />)
364+
expect(container.firstChild).toMatchSnapshot()
365+
})
366+
```
348367

349368
# toHaveStyleRule
350369

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
"typings"
1212
],
1313
"repository": "[email protected]:styled-components/jest-styled-components.git",
14+
"bugs": {
15+
"url": "https://github.com/styled-components/jest-styled-components/issues"
16+
},
1417
"author": "Michele Bertoli",
1518
"license": "MIT",
1619
"scripts": {

‎serializer/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
const styleSheetSerializer = require('../src/styleSheetSerializer')
22

33
module.exports.styleSheetSerializer = styleSheetSerializer
4+
module.exports.setStyleSheetSerializerOptions = styleSheetSerializer.setStyleSheetSerializerOptions;

‎src/styleSheetSerializer.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,10 +97,10 @@ const getClassNamesFromSelectorsByHashes = (classNames, hashes) => {
9797
return [...classNamesIncludingFromSelectors];
9898
};
9999

100-
const replaceClassNames = (result, classNames, style) =>
100+
const replaceClassNames = (result, classNames, style, classNameFormatter) =>
101101
classNames
102102
.filter((className) => style.includes(className))
103-
.reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
103+
.reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), classNameFormatter(index++)), result);
104104

105105
const stripUnreferencedClassNames = (result, classNames) =>
106106
classNames.reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`, 'g'), ''), result);
@@ -111,7 +111,26 @@ const replaceHashes = (result, hashes) =>
111111
result
112112
);
113113

114+
const serializerOptionDefaults = {
115+
addStyles: true,
116+
classNameFormatter: (index) => `c${index}`
117+
};
118+
let serializerOptions = serializerOptionDefaults;
119+
114120
module.exports = {
121+
122+
/**
123+
* Configure jest-styled-components/serializer
124+
*
125+
* @param {{ addStyles?: boolean, classNameFormatter?: (index: number) => string }} options
126+
*/
127+
setStyleSheetSerializerOptions(options = {}) {
128+
serializerOptions = {
129+
...serializerOptionDefaults,
130+
...options
131+
};
132+
},
133+
115134
test(val) {
116135
return (
117136
val &&
@@ -136,9 +155,9 @@ module.exports = {
136155
const classNamesToReplace = getClassNamesFromSelectorsByHashes(classNames, hashes);
137156
const code = print(val);
138157

139-
let result = `${style}${style ? '\n\n' : ''}${code}`;
158+
let result = serializerOptions.addStyles ? `${style}${style ? '\n\n' : ''}${code}`: code;
140159
result = stripUnreferencedClassNames(result, unreferencedClassNames);
141-
result = replaceClassNames(result, classNamesToReplace, style);
160+
result = replaceClassNames(result, classNamesToReplace, style, serializerOptions.classNameFormatter);
142161
result = replaceHashes(result, hashes);
143162

144163
return result;

‎test/__snapshots__/styleSheetSerializer.spec.js.snap‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,149 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`allows to disable css snapshotting: mount 1`] = `
4+
<div>
5+
<styled.div>
6+
<div
7+
className="c0"
8+
>
9+
Styled, exciting div
10+
</div>
11+
</styled.div>
12+
<styled.div>
13+
<div
14+
className="c1"
15+
>
16+
Styled, exciting div
17+
</div>
18+
</styled.div>
19+
</div>
20+
`;
21+
22+
exports[`allows to disable css snapshotting: react-test-renderer 1`] = `
23+
<div>
24+
<div
25+
className="c0"
26+
>
27+
Styled, exciting div
28+
</div>
29+
<div
30+
className="c1"
31+
>
32+
Styled, exciting div
33+
</div>
34+
</div>
35+
`;
36+
37+
exports[`allows to disable css snapshotting: react-testing-library 1`] = `
38+
<div>
39+
<div
40+
class="c0"
41+
>
42+
Styled, exciting div
43+
</div>
44+
<div
45+
class="c1"
46+
>
47+
Styled, exciting div
48+
</div>
49+
</div>
50+
`;
51+
52+
exports[`allows to disable css snapshotting: shallow 1`] = `
53+
<div>
54+
<styled.div>
55+
Styled, exciting div
56+
</styled.div>
57+
<styled.div>
58+
Styled, exciting div
59+
</styled.div>
60+
</div>
61+
`;
62+
63+
exports[`allows to set a css classNameFormatter: mount 1`] = `
64+
.styledComponent0 {
65+
color: red;
66+
}
67+
68+
.styledComponent1 {
69+
color: green;
70+
}
71+
72+
<div>
73+
<styled.div>
74+
<div
75+
className="styledComponent0"
76+
>
77+
Styled, exciting div
78+
</div>
79+
</styled.div>
80+
<styled.div>
81+
<div
82+
className="styledComponent1"
83+
>
84+
Styled, exciting div
85+
</div>
86+
</styled.div>
87+
</div>
88+
`;
89+
90+
exports[`allows to set a css classNameFormatter: react-test-renderer 1`] = `
91+
.styledComponent0 {
92+
color: red;
93+
}
94+
95+
.styledComponent1 {
96+
color: green;
97+
}
98+
99+
<div>
100+
<div
101+
className="styledComponent0"
102+
>
103+
Styled, exciting div
104+
</div>
105+
<div
106+
className="styledComponent1"
107+
>
108+
Styled, exciting div
109+
</div>
110+
</div>
111+
`;
112+
113+
exports[`allows to set a css classNameFormatter: react-testing-library 1`] = `
114+
.styledComponent0 {
115+
color: red;
116+
}
117+
118+
.styledComponent1 {
119+
color: green;
120+
}
121+
122+
<div>
123+
<div
124+
class="styledComponent0"
125+
>
126+
Styled, exciting div
127+
</div>
128+
<div
129+
class="styledComponent1"
130+
>
131+
Styled, exciting div
132+
</div>
133+
</div>
134+
`;
135+
136+
exports[`allows to set a css classNameFormatter: shallow 1`] = `
137+
<div>
138+
<styled.div>
139+
Styled, exciting div
140+
</styled.div>
141+
<styled.div>
142+
Styled, exciting div
143+
</styled.div>
144+
</div>
145+
`;
146+
3147
exports[`any component: mount 1`] = `
4148
.c0 {
5149
color: palevioletred;

‎test/styleSheetSerializer.spec.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { mount, shallow } from 'enzyme';
33
import React from 'react';
44
import renderer from 'react-test-renderer';
55
import styled, { ThemeContext, ThemeProvider } from 'styled-components';
6+
import {setStyleSheetSerializerOptions} from '../serializer';
67

78
const toMatchSnapshot = (component) => {
89
expect(renderer.create(component).toJSON()).toMatchSnapshot('react-test-renderer');
@@ -299,3 +300,36 @@ it('referring to other unreferenced components', () => {
299300
</div>
300301
);
301302
});
303+
304+
it('allows to disable css snapshotting', () => {
305+
setStyleSheetSerializerOptions({ addStyles: false })
306+
const A = styled.div`
307+
color: red;
308+
`; const B = styled.div`
309+
color: red;
310+
`;
311+
312+
toMatchSnapshot(
313+
<div>
314+
<A>Styled, exciting div</A>
315+
<B>Styled, exciting div</B>
316+
</div>
317+
);
318+
});
319+
320+
it('allows to set a css classNameFormatter', () => {
321+
setStyleSheetSerializerOptions({ classNameFormatter: (index) => `styledComponent${index}` })
322+
const A = styled.div`
323+
color: red;
324+
`;
325+
const B = styled.div`
326+
color: green;
327+
`;
328+
329+
toMatchSnapshot(
330+
<div>
331+
<A>Styled, exciting div</A>
332+
<B>Styled, exciting div</B>
333+
</div>
334+
);
335+
});

‎typings/index.d.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,11 @@ declare global {
2121
}
2222
}
2323

24-
export declare const styleSheetSerializer: Exclude<Plugin, NewPlugin>;
24+
export interface StyledComponentsSerializerOptions {
25+
addStyles?: boolean,
26+
classNameFormatter?: (index: number) => string
27+
}
28+
29+
export declare const styleSheetSerializer: Exclude<Plugin, NewPlugin> & {
30+
setStyleSheetSerializerOptions: (options?: StyledComponentsSerializerOptions) => void
31+
};

0 commit comments

Comments
 (0)