Skip to content

Commit cf86f99

Browse files
markmurmarkmur
committed
Use @testing-library/react-native
1 parent 9cb7feb commit cf86f99

File tree

3 files changed

+150
-41
lines changed

3 files changed

+150
-41
lines changed

‎modules/@shopify/checkout-sheet-kit/tests/context.test.tsx‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {act, create} from 'react-test-renderer';
2+
import {render, act} from '@testing-library/react-native';
33
import {NativeModules} from 'react-native';
44
import {
55
ShopifyCheckoutSheetProvider,
@@ -26,6 +26,11 @@ const HookTestComponent = ({
2626
return null;
2727
};
2828

29+
/**
30+
* Dummy child component to avoid rendering raw strings with React Native renderer
31+
*/
32+
const MockChild = () => null;
33+
2934
describe('ShopifyCheckoutSheetProvider', () => {
3035
const TestComponent = ({children}: {children: React.ReactNode}) => (
3136
<ShopifyCheckoutSheetProvider configuration={config}>
@@ -37,18 +42,22 @@ describe('ShopifyCheckoutSheetProvider', () => {
3742
jest.clearAllMocks();
3843
});
3944

40-
it('renders children correctly', () => {
41-
const component = create(
45+
it('renders without crashing', () => {
46+
const component = render(
4247
<TestComponent>
43-
<div>Test Child</div>
48+
<MockChild />
4449
</TestComponent>,
4550
);
4651

47-
expect(component.toJSON()).toBeTruthy();
52+
expect(component).toBeTruthy();
4853
});
4954

5055
it('creates ShopifyCheckoutSheet instance with configuration', () => {
51-
create(<TestComponent>test</TestComponent>);
56+
render(
57+
<TestComponent>
58+
<MockChild />
59+
</TestComponent>,
60+
);
5261

5362
expect(
5463
NativeModules.ShopifyCheckoutSheetKit.setConfig,
@@ -58,9 +67,9 @@ describe('ShopifyCheckoutSheetProvider', () => {
5867
it('creates ShopifyCheckoutSheet instance with features', () => {
5968
const features = {handleGeolocationRequests: false};
6069

61-
create(
70+
render(
6271
<ShopifyCheckoutSheetProvider features={features}>
63-
test
72+
<MockChild />
6473
</ShopifyCheckoutSheetProvider>,
6574
);
6675

@@ -70,12 +79,20 @@ describe('ShopifyCheckoutSheetProvider', () => {
7079
});
7180

7281
it('reuses the same instance across re-renders', () => {
73-
const component = create(<TestComponent>test</TestComponent>);
82+
const {rerender} = render(
83+
<TestComponent>
84+
<MockChild />
85+
</TestComponent>,
86+
);
7487

7588
const firstCallCount =
7689
NativeModules.ShopifyCheckoutSheetKit.setConfig.mock.calls.length;
7790

78-
component.update(<TestComponent>updated</TestComponent>);
91+
rerender(
92+
<TestComponent>
93+
<MockChild />
94+
</TestComponent>,
95+
);
7996

8097
const secondCallCount =
8198
NativeModules.ShopifyCheckoutSheetKit.setConfig.mock.calls.length;
@@ -101,7 +118,7 @@ describe('useShopifyCheckoutSheet', () => {
101118
hookValue = value;
102119
};
103120

104-
create(
121+
render(
105122
<Wrapper>
106123
<HookTestComponent onHookValue={onHookValue} />
107124
</Wrapper>,
@@ -117,7 +134,7 @@ describe('useShopifyCheckoutSheet', () => {
117134
hookValue = value;
118135
};
119136

120-
create(
137+
render(
121138
<Wrapper>
122139
<HookTestComponent onHookValue={onHookValue} />
123140
</Wrapper>,
@@ -136,7 +153,7 @@ describe('useShopifyCheckoutSheet', () => {
136153
hookValue = value;
137154
};
138155

139-
create(
156+
render(
140157
<Wrapper>
141158
<HookTestComponent onHookValue={onHookValue} />
142159
</Wrapper>,
@@ -157,7 +174,7 @@ describe('useShopifyCheckoutSheet', () => {
157174
hookValue = value;
158175
};
159176

160-
create(
177+
render(
161178
<Wrapper>
162179
<HookTestComponent onHookValue={onHookValue} />
163180
</Wrapper>,
@@ -178,7 +195,7 @@ describe('useShopifyCheckoutSheet', () => {
178195
hookValue = value;
179196
};
180197

181-
create(
198+
render(
182199
<Wrapper>
183200
<HookTestComponent onHookValue={onHookValue} />
184201
</Wrapper>,
@@ -199,7 +216,7 @@ describe('useShopifyCheckoutSheet', () => {
199216
hookValue = value;
200217
};
201218

202-
create(
219+
render(
203220
<Wrapper>
204221
<HookTestComponent onHookValue={onHookValue} />
205222
</Wrapper>,
@@ -220,7 +237,7 @@ describe('useShopifyCheckoutSheet', () => {
220237
hookValue = value;
221238
};
222239

223-
create(
240+
render(
224241
<Wrapper>
225242
<HookTestComponent onHookValue={onHookValue} />
226243
</Wrapper>,
@@ -241,7 +258,7 @@ describe('useShopifyCheckoutSheet', () => {
241258
hookValue = value;
242259
};
243260

244-
create(
261+
render(
245262
<Wrapper>
246263
<HookTestComponent onHookValue={onHookValue} />
247264
</Wrapper>,
@@ -262,7 +279,7 @@ describe('useShopifyCheckoutSheet', () => {
262279

263280
const newConfig = {colorScheme: ColorScheme.light};
264281

265-
create(
282+
render(
266283
<Wrapper>
267284
<HookTestComponent onHookValue={onHookValue} />
268285
</Wrapper>,
@@ -283,7 +300,7 @@ describe('useShopifyCheckoutSheet', () => {
283300
hookValue = value;
284301
};
285302

286-
create(
303+
render(
287304
<Wrapper>
288305
<HookTestComponent onHookValue={onHookValue} />
289306
</Wrapper>,
@@ -303,7 +320,7 @@ describe('useShopifyCheckoutSheet', () => {
303320
hookValue = value;
304321
};
305322

306-
create(
323+
render(
307324
<Wrapper>
308325
<HookTestComponent onHookValue={onHookValue} />
309326
</Wrapper>,
@@ -318,7 +335,7 @@ describe('useShopifyCheckoutSheet', () => {
318335
hookValue = value;
319336
};
320337

321-
create(
338+
render(
322339
<Wrapper>
323340
<HookTestComponent onHookValue={onHookValue} />
324341
</Wrapper>,
@@ -337,7 +354,7 @@ describe('ShopifyCheckoutSheetContext without provider', () => {
337354
hookValue = value;
338355
};
339356

340-
create(<HookTestComponent onHookValue={onHookValue} />);
357+
render(<HookTestComponent onHookValue={onHookValue} />);
341358

342359
const config = await hookValue.getConfig();
343360
expect(config).toBeUndefined();

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,12 @@
3232
"@react-native/eslint-config": "0.74.83",
3333
"@react-native/metro-config": "0.74.83",
3434
"@react-native/typescript-config": "0.74.83",
35+
"@testing-library/react-native": "^13.3.1",
3536
"@tsconfig/react-native": "^3.0.6",
3637
"@types/jest": "^30.0.0",
3738
"@types/react": "^18",
3839
"@types/react-native-dotenv": "^0.2.1",
39-
"@types/react-test-renderer": "^18.0.0",
40+
"@types/react-test-renderer": "^18",
4041
"babel-jest": "^29.7.0",
4142
"eslint": "^8.19.0",
4243
"eslint-plugin-prettier": "^5.5.1",
@@ -47,7 +48,7 @@
4748
"react-native-dotenv": "^3.4.9",
4849
"react-native-gesture-handler": "^2.15.0",
4950
"react-native-gradle-plugin": "^0.71.19",
50-
"react-test-renderer": "18.3.1",
51+
"react-test-renderer": "18.2.0",
5152
"ts-jest": "^29.1.1",
5253
"turbo": "^1.13.4",
5354
"typescript": "^5.9.2"

0 commit comments

Comments
 (0)