Skip to content

Commit 77d699f

Browse files
SaadnajmiSaadnajmi
committed
port rest of enzyme tests to react-test-renderer
1 parent 7d9e5df commit 77d699f

12 files changed

Lines changed: 487 additions & 988 deletions

File tree

‎packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap‎

Lines changed: 74 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -3,192 +3,92 @@
33
exports[`compressible tests Two labels, one plugging in SuperHeader instead 1`] = `
44
<View>
55
<View>
6-
<component
7-
captionText="Normal caption"
8-
headerSlot={[Function]}
9-
headerText="Super Header"
6+
<Text
7+
style={
8+
{
9+
"color": "purple",
10+
"fontSize": 24,
11+
"fontWeight": "700",
12+
}
13+
}
1014
>
11-
<View>
12-
<View>
13-
<Text
14-
style={
15-
{
16-
"color": "purple",
17-
"fontSize": 24,
18-
"fontWeight": "700",
19-
}
20-
}
21-
>
22-
<Text
23-
style={
24-
{
25-
"color": "purple",
26-
"fontSize": 24,
27-
"fontWeight": "700",
28-
}
29-
}
30-
>
31-
Super Header
32-
</Text>
33-
</Text>
34-
<Text
35-
style={
36-
{
37-
"color": "gray",
38-
"fontSize": 12,
39-
"fontWeight": "300",
40-
}
41-
}
42-
>
43-
<Text
44-
style={
45-
{
46-
"color": "gray",
47-
"fontSize": 12,
48-
"fontWeight": "300",
49-
}
50-
}
51-
>
52-
Normal caption
53-
</Text>
54-
</Text>
55-
</View>
56-
</View>
57-
</component>
58-
<component
59-
captionText="Another normal caption"
60-
headerText="Normal Header"
15+
Super Header
16+
</Text>
17+
<Text
18+
style={
19+
{
20+
"color": "gray",
21+
"fontSize": 12,
22+
"fontWeight": "300",
23+
}
24+
}
6125
>
62-
<View>
63-
<View>
64-
<Text
65-
style={
66-
{
67-
"color": "blue",
68-
"fontSize": 16,
69-
"fontWeight": "700",
70-
}
71-
}
72-
>
73-
<Text
74-
style={
75-
{
76-
"color": "blue",
77-
"fontSize": 16,
78-
"fontWeight": "700",
79-
}
80-
}
81-
>
82-
Normal Header
83-
</Text>
84-
</Text>
85-
<Text
86-
style={
87-
{
88-
"color": "gray",
89-
"fontSize": 12,
90-
"fontWeight": "300",
91-
}
92-
}
93-
>
94-
<Text
95-
style={
96-
{
97-
"color": "gray",
98-
"fontSize": 12,
99-
"fontWeight": "300",
100-
}
101-
}
102-
>
103-
Another normal caption
104-
</Text>
105-
</Text>
106-
</View>
107-
</View>
108-
</component>
26+
Normal caption
27+
</Text>
28+
</View>
29+
<View>
30+
<Text
31+
style={
32+
{
33+
"color": "blue",
34+
"fontSize": 16,
35+
"fontWeight": "700",
36+
}
37+
}
38+
>
39+
Normal Header
40+
</Text>
41+
<Text
42+
style={
43+
{
44+
"color": "gray",
45+
"fontSize": 12,
46+
"fontWeight": "300",
47+
}
48+
}
49+
>
50+
Another normal caption
51+
</Text>
10952
</View>
11053
</View>
11154
`;
11255

11356
exports[`compressible tests Two labels, one with caption and one without 1`] = `
11457
<View>
58+
<Text
59+
style={
60+
{
61+
"color": "blue",
62+
"fontSize": 16,
63+
"fontWeight": "700",
64+
}
65+
}
66+
>
67+
Header1
68+
</Text>
11569
<View>
116-
<component
117-
headerText="Header1"
70+
<Text
71+
style={
72+
{
73+
"color": "blue",
74+
"fontSize": 16,
75+
"fontWeight": "700",
76+
}
77+
}
11878
>
119-
<Text
120-
style={
121-
{
122-
"color": "blue",
123-
"fontSize": 16,
124-
"fontWeight": "700",
125-
}
79+
Header2
80+
</Text>
81+
<Text
82+
style={
83+
{
84+
"color": "gray",
85+
"fontSize": 12,
86+
"fontWeight": "300",
12687
}
127-
>
128-
<Text
129-
style={
130-
{
131-
"color": "blue",
132-
"fontSize": 16,
133-
"fontWeight": "700",
134-
}
135-
}
136-
>
137-
Header1
138-
</Text>
139-
</Text>
140-
</component>
141-
<component
142-
captionText="Caption2"
143-
headerText="Header2"
88+
}
14489
>
145-
<View>
146-
<View>
147-
<Text
148-
style={
149-
{
150-
"color": "blue",
151-
"fontSize": 16,
152-
"fontWeight": "700",
153-
}
154-
}
155-
>
156-
<Text
157-
style={
158-
{
159-
"color": "blue",
160-
"fontSize": 16,
161-
"fontWeight": "700",
162-
}
163-
}
164-
>
165-
Header2
166-
</Text>
167-
</Text>
168-
<Text
169-
style={
170-
{
171-
"color": "gray",
172-
"fontSize": 12,
173-
"fontWeight": "300",
174-
}
175-
}
176-
>
177-
<Text
178-
style={
179-
{
180-
"color": "gray",
181-
"fontSize": 12,
182-
"fontWeight": "300",
183-
}
184-
}
185-
>
186-
Caption2
187-
</Text>
188-
</Text>
189-
</View>
190-
</View>
191-
</component>
90+
Caption2
91+
</Text>
19292
</View>
19393
</View>
19494
`;

‎packages/framework/framework/src/compressible.test.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { mergeStyles } from '@fluentui-react-native/merge-props';
88
import type { Theme } from '@fluentui-react-native/theme-types';
99
import { useSlot, withSlots } from '@fluentui-react-native/use-slot';
1010
import { applyTokenLayers } from '@fluentui-react-native/use-tokens';
11-
import { mount } from 'enzyme';
12-
import toJson from 'enzyme-to-json';
11+
import * as renderer from 'react-test-renderer';
1312

1413
import { compressible } from './compressible';
1514
import { buildUseTokens } from './useTokens';
@@ -103,32 +102,28 @@ const Label = compressible<LabelProps, LabelTokens>((props: LabelProps, useToken
103102
};
104103
}, useLabelTokens);
105104

106-
/**
107-
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
108-
*/
109-
function snapshotTestTree(tree: any) {
110-
(expect(toJson(tree)) as any).toMatchSnapshot();
111-
}
112-
113105
describe('compressible tests', () => {
114-
/** first render the component with no updates */
115106
it('Two labels, one with caption and one without', () => {
116-
const tree = mount(
117-
<View>
118-
<Label headerText="Header1" />
119-
<Label headerText="Header2" captionText="Caption2" />
120-
</View>,
121-
);
122-
snapshotTestTree(tree);
107+
const tree = renderer
108+
.create(
109+
<View>
110+
<Label headerText="Header1" />
111+
<Label headerText="Header2" captionText="Caption2" />
112+
</View>,
113+
)
114+
.toJSON();
115+
expect(tree).toMatchSnapshot();
123116
});
124117

125118
it('Two labels, one plugging in SuperHeader instead', () => {
126-
const tree = mount(
127-
<View>
128-
<Label headerText="Super Header" headerSlot={SuperHeader} captionText="Normal caption" />
129-
<Label headerText="Normal Header" captionText="Another normal caption" />
130-
</View>,
131-
);
132-
snapshotTestTree(tree);
119+
const tree = renderer
120+
.create(
121+
<View>
122+
<Label headerText="Super Header" headerSlot={SuperHeader} captionText="Normal caption" />
123+
<Label headerText="Normal Header" captionText="Another normal caption" />
124+
</View>,
125+
)
126+
.toJSON();
127+
expect(tree).toMatchSnapshot();
133128
});
134129
});

0 commit comments

Comments
 (0)