Skip to content

Commit 44dae1f

Browse files
jantimonjantimon
committed
add setStyleSheetSerializerOptions
1 parent ee94821 commit 44dae1f

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
@@ -87,10 +87,10 @@ const getClassNamesFromSelectorsByHashes = (classNames, hashes) => {
8787
return [...classNamesIncludingFromSelectors];
8888
};
8989

90-
const replaceClassNames = (result, classNames, style) =>
90+
const replaceClassNames = (result, classNames, style, classNameFormatter) =>
9191
classNames
9292
.filter(className => style.includes(className))
93-
.reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
93+
.reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), classNameFormatter(index++)), result);
9494

9595
const stripUnreferencedClassNames = (result, classNames) =>
9696
classNames
@@ -102,7 +102,26 @@ const replaceHashes = (result, hashes) =>
102102
result
103103
);
104104

105+
const serializerOptionDefaults = {
106+
addStyles: true,
107+
classNameFormatter: (index) => `c${index}`
108+
};
109+
let serializerOptions = serializerOptionDefaults;
110+
105111
module.exports = {
112+
113+
/**
114+
* Configure jest-styled-components/serializer
115+
*
116+
* @param {{ addStyles?: boolean, classNameFormatter?: (index: number) => string }} options
117+
*/
118+
setStyleSheetSerializerOptions(options = {}) {
119+
serializerOptions = {
120+
...serializerOptionDefaults,
121+
...options
122+
};
123+
},
124+
106125
test(val) {
107126
return (
108127
val &&
@@ -127,9 +146,9 @@ module.exports = {
127146
const classNamesToReplace = getClassNamesFromSelectorsByHashes(classNames, hashes);
128147
const code = print(val);
129148

130-
let result = `${style}${style ? '\n\n' : ''}${code}`;
149+
let result = serializerOptions.addStyles ? `${style}${style ? '\n\n' : ''}${code}`: code;
131150
result = stripUnreferencedClassNames(result, unreferencedClassNames);
132-
result = replaceClassNames(result, classNamesToReplace, style);
151+
result = replaceClassNames(result, classNamesToReplace, style, serializerOptions.classNameFormatter);
133152
result = replaceHashes(result, hashes);
134153

135154
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');
@@ -267,3 +268,36 @@ it('referring to other unreferenced components', () => {
267268
</div>
268269
);
269270
});
271+
272+
it('allows to disable css snapshotting', () => {
273+
setStyleSheetSerializerOptions({ addStyles: false })
274+
const A = styled.div`
275+
color: red;
276+
`; const B = styled.div`
277+
color: red;
278+
`;
279+
280+
toMatchSnapshot(
281+
<div>
282+
<A>Styled, exciting div</A>
283+
<B>Styled, exciting div</B>
284+
</div>
285+
);
286+
});
287+
288+
it('allows to set a css classNameFormatter', () => {
289+
setStyleSheetSerializerOptions({ classNameFormatter: (index) => `styledComponent${index}` })
290+
const A = styled.div`
291+
color: red;
292+
`;
293+
const B = styled.div`
294+
color: green;
295+
`;
296+
297+
toMatchSnapshot(
298+
<div>
299+
<A>Styled, exciting div</A>
300+
<B>Styled, exciting div</B>
301+
</div>
302+
);
303+
});

‎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)