Skip to content

Commit c029d80

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

File tree

3 files changed

+147
-43
lines changed

3 files changed

+147
-43
lines changed

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

Lines changed: 37 additions & 25 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,
@@ -12,10 +12,8 @@ const config: Configuration = {
1212
colorScheme: ColorScheme.automatic,
1313
};
1414

15-
// Use the shared manual mock. Individual tests can override if needed.
1615
jest.mock('react-native');
1716

18-
// Helper component to test the hook
1917
const HookTestComponent = ({
2018
onHookValue,
2119
}: {
@@ -26,6 +24,8 @@ const HookTestComponent = ({
2624
return null;
2725
};
2826

27+
const MockChild = () => null;
28+
2929
describe('ShopifyCheckoutSheetProvider', () => {
3030
const TestComponent = ({children}: {children: React.ReactNode}) => (
3131
<ShopifyCheckoutSheetProvider configuration={config}>
@@ -37,18 +37,22 @@ describe('ShopifyCheckoutSheetProvider', () => {
3737
jest.clearAllMocks();
3838
});
3939

40-
it('renders children correctly', () => {
41-
const component = create(
40+
it('renders without crashing', () => {
41+
const component = render(
4242
<TestComponent>
43-
<div>Test Child</div>
43+
<MockChild />
4444
</TestComponent>,
4545
);
4646

47-
expect(component.toJSON()).toBeTruthy();
47+
expect(component).toBeTruthy();
4848
});
4949

5050
it('creates ShopifyCheckoutSheet instance with configuration', () => {
51-
create(<TestComponent>test</TestComponent>);
51+
render(
52+
<TestComponent>
53+
<MockChild />
54+
</TestComponent>,
55+
);
5256

5357
expect(
5458
NativeModules.ShopifyCheckoutSheetKit.setConfig,
@@ -58,9 +62,9 @@ describe('ShopifyCheckoutSheetProvider', () => {
5862
it('creates ShopifyCheckoutSheet instance with features', () => {
5963
const features = {handleGeolocationRequests: false};
6064

61-
create(
65+
render(
6266
<ShopifyCheckoutSheetProvider features={features}>
63-
test
67+
<MockChild />
6468
</ShopifyCheckoutSheetProvider>,
6569
);
6670

@@ -70,12 +74,20 @@ describe('ShopifyCheckoutSheetProvider', () => {
7074
});
7175

7276
it('reuses the same instance across re-renders', () => {
73-
const component = create(<TestComponent>test</TestComponent>);
77+
const {rerender} = render(
78+
<TestComponent>
79+
<MockChild />
80+
</TestComponent>,
81+
);
7482

7583
const firstCallCount =
7684
NativeModules.ShopifyCheckoutSheetKit.setConfig.mock.calls.length;
7785

78-
component.update(<TestComponent>updated</TestComponent>);
86+
rerender(
87+
<TestComponent>
88+
<MockChild />
89+
</TestComponent>,
90+
);
7991

8092
const secondCallCount =
8193
NativeModules.ShopifyCheckoutSheetKit.setConfig.mock.calls.length;
@@ -101,7 +113,7 @@ describe('useShopifyCheckoutSheet', () => {
101113
hookValue = value;
102114
};
103115

104-
create(
116+
render(
105117
<Wrapper>
106118
<HookTestComponent onHookValue={onHookValue} />
107119
</Wrapper>,
@@ -117,7 +129,7 @@ describe('useShopifyCheckoutSheet', () => {
117129
hookValue = value;
118130
};
119131

120-
create(
132+
render(
121133
<Wrapper>
122134
<HookTestComponent onHookValue={onHookValue} />
123135
</Wrapper>,
@@ -136,7 +148,7 @@ describe('useShopifyCheckoutSheet', () => {
136148
hookValue = value;
137149
};
138150

139-
create(
151+
render(
140152
<Wrapper>
141153
<HookTestComponent onHookValue={onHookValue} />
142154
</Wrapper>,
@@ -157,7 +169,7 @@ describe('useShopifyCheckoutSheet', () => {
157169
hookValue = value;
158170
};
159171

160-
create(
172+
render(
161173
<Wrapper>
162174
<HookTestComponent onHookValue={onHookValue} />
163175
</Wrapper>,
@@ -178,7 +190,7 @@ describe('useShopifyCheckoutSheet', () => {
178190
hookValue = value;
179191
};
180192

181-
create(
193+
render(
182194
<Wrapper>
183195
<HookTestComponent onHookValue={onHookValue} />
184196
</Wrapper>,
@@ -199,7 +211,7 @@ describe('useShopifyCheckoutSheet', () => {
199211
hookValue = value;
200212
};
201213

202-
create(
214+
render(
203215
<Wrapper>
204216
<HookTestComponent onHookValue={onHookValue} />
205217
</Wrapper>,
@@ -220,7 +232,7 @@ describe('useShopifyCheckoutSheet', () => {
220232
hookValue = value;
221233
};
222234

223-
create(
235+
render(
224236
<Wrapper>
225237
<HookTestComponent onHookValue={onHookValue} />
226238
</Wrapper>,
@@ -241,7 +253,7 @@ describe('useShopifyCheckoutSheet', () => {
241253
hookValue = value;
242254
};
243255

244-
create(
256+
render(
245257
<Wrapper>
246258
<HookTestComponent onHookValue={onHookValue} />
247259
</Wrapper>,
@@ -262,7 +274,7 @@ describe('useShopifyCheckoutSheet', () => {
262274

263275
const newConfig = {colorScheme: ColorScheme.light};
264276

265-
create(
277+
render(
266278
<Wrapper>
267279
<HookTestComponent onHookValue={onHookValue} />
268280
</Wrapper>,
@@ -283,7 +295,7 @@ describe('useShopifyCheckoutSheet', () => {
283295
hookValue = value;
284296
};
285297

286-
create(
298+
render(
287299
<Wrapper>
288300
<HookTestComponent onHookValue={onHookValue} />
289301
</Wrapper>,
@@ -303,7 +315,7 @@ describe('useShopifyCheckoutSheet', () => {
303315
hookValue = value;
304316
};
305317

306-
create(
318+
render(
307319
<Wrapper>
308320
<HookTestComponent onHookValue={onHookValue} />
309321
</Wrapper>,
@@ -318,7 +330,7 @@ describe('useShopifyCheckoutSheet', () => {
318330
hookValue = value;
319331
};
320332

321-
create(
333+
render(
322334
<Wrapper>
323335
<HookTestComponent onHookValue={onHookValue} />
324336
</Wrapper>,
@@ -337,7 +349,7 @@ describe('ShopifyCheckoutSheetContext without provider', () => {
337349
hookValue = value;
338350
};
339351

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

342354
const config = await hookValue.getConfig();
343355
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)