Skip to content

Commit a20db4d

Browse files
mdjastrzebskimdjastrzebski
committed
refactor: make render async by default
1 parent f534aa7 commit a20db4d

File tree

15 files changed

+324
-172
lines changed

15 files changed

+324
-172
lines changed

‎src/__tests__/cleanup.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { View } from 'react-native';
33

4-
import { cleanupAsync, render, renderAsync } from '../pure';
4+
import { cleanupAsync, deprecated_renderSync, render } from '../pure';
55

66
class Test extends React.Component<{ onUnmount: () => void }> {
77
componentWillUnmount() {
@@ -14,22 +14,22 @@ class Test extends React.Component<{ onUnmount: () => void }> {
1414
}
1515
}
1616

17-
test('cleanup after render', async () => {
17+
test('cleanup after deprecated_renderSync', async () => {
1818
const fn = jest.fn();
1919

20-
render(<Test onUnmount={fn} />);
21-
render(<Test onUnmount={fn} />);
20+
deprecated_renderSync(<Test onUnmount={fn} />);
21+
deprecated_renderSync(<Test onUnmount={fn} />);
2222
expect(fn).not.toHaveBeenCalled();
2323

2424
await cleanupAsync();
2525
expect(fn).toHaveBeenCalledTimes(2);
2626
});
2727

28-
test('cleanup after renderAsync', async () => {
28+
test('cleanup after render', async () => {
2929
const fn = jest.fn();
3030

31-
await renderAsync(<Test onUnmount={fn} />);
32-
await renderAsync(<Test onUnmount={fn} />);
31+
await render(<Test onUnmount={fn} />);
32+
await render(<Test onUnmount={fn} />);
3333
expect(fn).not.toHaveBeenCalled();
3434

3535
await cleanupAsync();

src/__tests__/render.test.tsx renamed to src/__tests__/deprecated/render.test.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import { Pressable, Text, TextInput, View } from 'react-native';
33

4-
import type { RenderAPI } from '..';
5-
import { fireEvent, render, screen } from '..';
4+
import type { RenderAPI } from '../..';
5+
import { fireEvent, deprecated_renderSync, screen } from '../..';
66

77
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
88
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -75,13 +75,13 @@ class Banana extends React.Component<any, { fresh: boolean }> {
7575
}
7676

7777
test('supports basic rendering', () => {
78-
render(<View testID="test" />);
78+
deprecated_renderSync(<View testID="test" />);
7979
expect(screen.root).toBeOnTheScreen();
8080
});
8181

8282
test('rerender', async () => {
8383
const fn = jest.fn();
84-
render(<Banana onUpdate={fn} />);
84+
deprecated_renderSync(<Banana onUpdate={fn} />);
8585
expect(fn).toHaveBeenCalledTimes(0);
8686

8787
await fireEvent.press(screen.getByText('Change freshness!'));
@@ -93,7 +93,7 @@ test('rerender', async () => {
9393

9494
test('unmount', () => {
9595
const fn = jest.fn();
96-
render(<Banana onUnmount={fn} />);
96+
deprecated_renderSync(<Banana onUnmount={fn} />);
9797
screen.unmount();
9898
expect(fn).toHaveBeenCalled();
9999
});
@@ -105,15 +105,15 @@ test('unmount should handle cleanup functions', () => {
105105
return null;
106106
};
107107

108-
render(<Component />);
108+
deprecated_renderSync(<Component />);
109109

110110
screen.unmount();
111111

112112
expect(cleanup).toHaveBeenCalledTimes(1);
113113
});
114114

115115
test('toJSON renders host output', () => {
116-
render(<MyButton>press me</MyButton>);
116+
deprecated_renderSync(<MyButton>press me</MyButton>);
117117
expect(screen).toMatchSnapshot();
118118
});
119119

@@ -123,7 +123,7 @@ test('renders options.wrapper around node', () => {
123123
<View testID="wrapper">{children}</View>
124124
);
125125

126-
render(<View testID="inner" />, {
126+
deprecated_renderSync(<View testID="inner" />, {
127127
wrapper: WrapperComponent,
128128
});
129129

@@ -145,7 +145,7 @@ test('renders options.wrapper around updated node', () => {
145145
<View testID="wrapper">{children}</View>
146146
);
147147

148-
render(<View testID="inner" />, {
148+
deprecated_renderSync(<View testID="inner" />, {
149149
wrapper: WrapperComponent,
150150
});
151151

@@ -166,28 +166,28 @@ test('renders options.wrapper around updated node', () => {
166166
});
167167

168168
test('returns host root', () => {
169-
render(<View testID="inner" />);
169+
deprecated_renderSync(<View testID="inner" />);
170170

171171
expect(screen.root).toBeDefined();
172172
expect(screen.root?.type).toBe('View');
173173
expect(screen.root?.props.testID).toBe('inner');
174174
});
175175

176176
test('RenderAPI type', () => {
177-
render(<Banana />) as RenderAPI;
177+
deprecated_renderSync(<Banana />) as RenderAPI;
178178
expect(true).toBeTruthy();
179179
});
180180

181181
test('returned output can be spread using rest operator', () => {
182182
// Next line should not throw
183183
// eslint-disable-next-line @typescript-eslint/no-unused-vars
184-
const { rerender, ...rest } = render(<View testID="test" />);
184+
const { rerender, ...rest } = deprecated_renderSync(<View testID="test" />);
185185
expect(rest).toBeTruthy();
186186
});
187187

188188
test('rerenderAsync updates the component asynchronously', async () => {
189189
const fn = jest.fn();
190-
const result = render(<Banana onUpdate={fn} />);
190+
const result = deprecated_renderSync(<Banana onUpdate={fn} />);
191191

192192
await result.rerenderAsync(<Banana onUpdate={fn} />);
193193

@@ -196,7 +196,7 @@ test('rerenderAsync updates the component asynchronously', async () => {
196196

197197
test('updateAsync is an alias for rerenderAsync', async () => {
198198
const fn = jest.fn();
199-
const result = render(<Banana onUpdate={fn} />);
199+
const result = deprecated_renderSync(<Banana onUpdate={fn} />);
200200

201201
await result.updateAsync(<Banana onUpdate={fn} />);
202202

@@ -205,7 +205,7 @@ test('updateAsync is an alias for rerenderAsync', async () => {
205205

206206
test('unmountAsync unmounts the component asynchronously', async () => {
207207
const fn = jest.fn();
208-
const result = render(<Banana onUnmount={fn} />);
208+
const result = deprecated_renderSync(<Banana onUnmount={fn} />);
209209

210210
await result.unmountAsync();
211211

‎src/__tests__/render-async.test.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Text, View } from 'react-native';
33

4-
import { renderAsync, screen } from '..';
4+
import { render, screen } from '..';
55

66
class Banana extends React.Component<any, { fresh: boolean }> {
77
state = {
@@ -36,52 +36,52 @@ class Banana extends React.Component<any, { fresh: boolean }> {
3636
}
3737
}
3838

39-
test('renderAsync renders component asynchronously', async () => {
40-
await renderAsync(<View testID="test" />);
39+
test('render renders component asynchronously', async () => {
40+
await render(<View testID="test" />);
4141
expect(screen.getByTestId('test')).toBeOnTheScreen();
4242
});
4343

44-
test('renderAsync with wrapper option', async () => {
44+
test('render with wrapper option', async () => {
4545
const WrapperComponent = ({ children }: { children: React.ReactNode }) => (
4646
<View testID="wrapper">{children}</View>
4747
);
4848

49-
await renderAsync(<View testID="inner" />, {
49+
await render(<View testID="inner" />, {
5050
wrapper: WrapperComponent,
5151
});
5252

5353
expect(screen.getByTestId('wrapper')).toBeTruthy();
5454
expect(screen.getByTestId('inner')).toBeTruthy();
5555
});
5656

57-
test('rerender function throws error when used with renderAsync', async () => {
58-
await renderAsync(<Banana />);
57+
test('rerender function throws error when used with render', async () => {
58+
await render(<Banana />);
5959

6060
expect(() => screen.rerender(<Banana />)).toThrowErrorMatchingInlineSnapshot(
61-
`""rerender(...)" is not supported when using "renderAsync" use "await rerenderAsync(...)" instead"`,
61+
`""rerender(...)" is not supported when using "render" use "await rerenderAsync(...)" instead"`,
6262
);
6363
});
6464

6565
test('rerenderAsync function updates component asynchronously', async () => {
6666
const fn = jest.fn();
67-
await renderAsync(<Banana onUpdate={fn} />);
67+
await render(<Banana onUpdate={fn} />);
6868
expect(fn).toHaveBeenCalledTimes(0);
6969

7070
await screen.rerenderAsync(<Banana onUpdate={fn} />);
7171
expect(fn).toHaveBeenCalledTimes(1);
7272
});
7373

74-
test('unmount function throws error when used with renderAsync', async () => {
75-
await renderAsync(<Banana />);
74+
test('unmount function throws error when used with render', async () => {
75+
await render(<Banana />);
7676

7777
expect(() => screen.unmount()).toThrowErrorMatchingInlineSnapshot(
78-
`""unmount()" is not supported when using "renderAsync" use "await unmountAsync()" instead"`,
78+
`""unmount()" is not supported when using "render" use "await unmountAsync()" instead"`,
7979
);
8080
});
8181

8282
test('unmountAsync function unmounts component asynchronously', async () => {
8383
const fn = jest.fn();
84-
await renderAsync(<Banana onUnmount={fn} />);
84+
await render(<Banana onUnmount={fn} />);
8585

8686
await screen.unmountAsync();
8787
expect(fn).toHaveBeenCalled();

‎src/__tests__/screen.test.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Text, View } from 'react-native';
33

44
import { render, screen } from '..';
55

6-
test('screen has the same queries as render result', () => {
7-
const result = render(<Text>Mt. Everest</Text>);
6+
test('screen has the same queries as render result', async () => {
7+
const result = await render(<Text>Mt. Everest</Text>);
88
expect(screen).toBe(result);
99

1010
expect(screen.getByText('Mt. Everest')).toBeTruthy();
@@ -13,35 +13,35 @@ test('screen has the same queries as render result', () => {
1313
expect(screen.queryAllByText('Mt. Everest')).toHaveLength(1);
1414
});
1515

16-
test('screen holds last render result', () => {
17-
render(<Text>Mt. Everest</Text>);
18-
render(<Text>Mt. Blanc</Text>);
19-
const finalResult = render(<Text>Śnieżka</Text>);
16+
test('screen holds last render result', async () => {
17+
await render(<Text>Mt. Everest</Text>);
18+
await render(<Text>Mt. Blanc</Text>);
19+
const finalResult = await render(<Text>Śnieżka</Text>);
2020
expect(screen).toBe(finalResult);
2121

2222
expect(screen.getByText('Śnieżka')).toBeTruthy();
2323
expect(screen.queryByText('Mt. Everest')).toBeFalsy();
2424
expect(screen.queryByText('Mt. Blanc')).toBeFalsy();
2525
});
2626

27-
test('screen works with updating rerender', () => {
28-
const result = render(<Text>Mt. Everest</Text>);
27+
test('screen works with updating rerender', async () => {
28+
const result = await render(<Text>Mt. Everest</Text>);
2929
expect(screen).toBe(result);
3030

31-
screen.rerender(<Text>Śnieżka</Text>);
31+
await screen.rerenderAsync(<Text>Śnieżka</Text>);
3232
expect(screen).toBe(result);
3333
expect(screen.getByText('Śnieżka')).toBeTruthy();
3434
});
3535

36-
test('screen works with nested re-mounting rerender', () => {
37-
const result = render(
36+
test('screen works with nested re-mounting rerender', async () => {
37+
const result = await render(
3838
<View>
3939
<Text>Mt. Everest</Text>
4040
</View>,
4141
);
4242
expect(screen).toBe(result);
4343

44-
screen.rerender(
44+
await screen.rerenderAsync(
4545
<View>
4646
<View>
4747
<Text>Śnieżka</Text>

‎src/__tests__/suspense-fake-timers.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Text, View } from 'react-native';
33

4-
import { act, renderAsync, screen } from '..';
4+
import { act, render, screen } from '..';
55
import { excludeConsoleMessage } from '../test-utils/console';
66

77
jest.useFakeTimers();
@@ -26,7 +26,7 @@ test('resolves manually-controlled promise', async () => {
2626
resolvePromise = resolve;
2727
});
2828

29-
await renderAsync(
29+
await render(
3030
<View>
3131
<React.Suspense fallback={<Text>Loading...</Text>}>
3232
<Suspending promise={promise} testID="content" />
@@ -50,7 +50,7 @@ test('resolves timer-controlled promise', async () => {
5050
setTimeout(() => resolve(null), 100);
5151
});
5252

53-
await renderAsync(
53+
await render(
5454
<View>
5555
<React.Suspense fallback={<Text>Loading...</Text>}>
5656
<Suspending promise={promise} testID="content" />
@@ -96,7 +96,7 @@ test('handles promise rejection with error boundary', async () => {
9696
rejectPromise = reject;
9797
});
9898

99-
await renderAsync(
99+
await render(
100100
<ErrorBoundary fallback={<Text>Error occurred</Text>}>
101101
<React.Suspense fallback={<Text>Loading...</Text>}>
102102
<Suspending promise={promise} testID="content" />
@@ -126,7 +126,7 @@ test('handles multiple suspending components', async () => {
126126
resolvePromise2 = resolve;
127127
});
128128

129-
await renderAsync(
129+
await render(
130130
<View>
131131
<React.Suspense fallback={<Text>Loading...</Text>}>
132132
<Suspending promise={promise1} testID="content-1" />
@@ -163,7 +163,7 @@ test('handles multiple suspense boundaries independently', async () => {
163163
resolvePromise2 = resolve;
164164
});
165165

166-
await renderAsync(
166+
await render(
167167
<View>
168168
<React.Suspense fallback={<Text>First Loading...</Text>}>
169169
<Suspending promise={promise1} testID="content-1" />

‎src/__tests__/suspense.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Text, View } from 'react-native';
33

4-
import { act, renderAsync, screen } from '..';
4+
import { act, render, screen } from '..';
55
import { excludeConsoleMessage } from '../test-utils/console';
66

77
// eslint-disable-next-line no-console
@@ -24,7 +24,7 @@ test('resolves manually-controlled promise', async () => {
2424
resolvePromise = resolve;
2525
});
2626

27-
await renderAsync(
27+
await render(
2828
<View>
2929
<React.Suspense fallback={<Text>Loading...</Text>}>
3030
<Suspending promise={promise} testID="content" />
@@ -48,7 +48,7 @@ test('resolves timer-controlled promise', async () => {
4848
setTimeout(() => resolve(null), 100);
4949
});
5050

51-
await renderAsync(
51+
await render(
5252
<View>
5353
<React.Suspense fallback={<Text>Loading...</Text>}>
5454
<Suspending promise={promise} testID="content" />
@@ -93,7 +93,7 @@ test('handles promise rejection with error boundary', async () => {
9393
rejectPromise = reject;
9494
});
9595

96-
await renderAsync(
96+
await render(
9797
<ErrorBoundary fallback={<Text>Error occurred</Text>}>
9898
<React.Suspense fallback={<Text>Loading...</Text>}>
9999
<Suspending promise={promise} testID="content" />
@@ -123,7 +123,7 @@ test('handles multiple suspending components', async () => {
123123
resolvePromise2 = resolve;
124124
});
125125

126-
await renderAsync(
126+
await render(
127127
<View>
128128
<React.Suspense fallback={<Text>Loading...</Text>}>
129129
<Suspending promise={promise1} testID="content-1" />
@@ -160,7 +160,7 @@ test('handles multiple suspense boundaries independently', async () => {
160160
resolvePromise2 = resolve;
161161
});
162162

163-
await renderAsync(
163+
await render(
164164
<View>
165165
<React.Suspense fallback={<Text>First Loading...</Text>}>
166166
<Suspending promise={promise1} testID="content-1" />

0 commit comments

Comments
 (0)