@@ -52,6 +52,7 @@ CUSTOM_RENDER_FUNCTIONS="renderWithProviders,renderWithTheme" npx codemod@latest
5252#### Basic sync test
5353
5454** Before:**
55+
5556``` typescript
5657import { render , screen } from ' @testing-library/react-native' ;
5758
@@ -62,6 +63,7 @@ test('renders component', () => {
6263```
6364
6465** After:**
66+
6567``` typescript
6668import { render , screen } from ' @testing-library/react-native' ;
6769
@@ -74,13 +76,15 @@ test('renders component', async () => {
7476#### Already async test
7577
7678** Before:**
79+
7780``` typescript
7881test (' renders component' , async () => {
7982 render (<MyComponent />);
8083});
8184```
8285
8386** After:**
87+
8488``` typescript
8589test (' renders component' , async () => {
8690 await render (<MyComponent />);
@@ -90,6 +94,7 @@ test('renders component', async () => {
9094#### Multiple render calls
9195
9296** Before:**
97+
9398``` typescript
9499test (' renders multiple' , () => {
95100 render (<Comp1 />);
@@ -98,6 +103,7 @@ test('renders multiple', () => {
98103```
99104
100105** After:**
106+
101107``` typescript
102108test (' renders multiple' , async () => {
103109 await render (<Comp1 />);
@@ -108,13 +114,15 @@ test('renders multiple', async () => {
108114#### Render with options
109115
110116** Before:**
117+
111118``` typescript
112119test (' renders with wrapper' , () => {
113120 render (<Component />, { wrapper: Wrapper });
114121});
115122```
116123
117124** After:**
125+
118126``` typescript
119127test (' renders with wrapper' , async () => {
120128 await render (<Component />, { wrapper: Wrapper });
@@ -124,6 +132,7 @@ test('renders with wrapper', async () => {
124132#### Using act()
125133
126134** Before:**
135+
127136``` typescript
128137import { act } from ' @testing-library/react-native' ;
129138
@@ -135,6 +144,7 @@ test('updates state', () => {
135144```
136145
137146** After:**
147+
138148``` typescript
139149import { act } from ' @testing-library/react-native' ;
140150
@@ -148,6 +158,7 @@ test('updates state', async () => {
148158#### Using renderHook()
149159
150160** Before:**
161+
151162``` typescript
152163import { renderHook } from ' @testing-library/react-native' ;
153164
@@ -158,6 +169,7 @@ test('renders hook', () => {
158169```
159170
160171** After:**
172+
161173``` typescript
162174import { renderHook } from ' @testing-library/react-native' ;
163175
@@ -170,6 +182,7 @@ test('renders hook', async () => {
170182#### Combined usage
171183
172184** Before:**
185+
173186``` typescript
174187import { render , act , renderHook , screen } from ' @testing-library/react-native' ;
175188
@@ -183,6 +196,7 @@ test('uses all three', () => {
183196```
184197
185198** After:**
199+
186200``` typescript
187201import { render , act , renderHook , screen } from ' @testing-library/react-native' ;
188202
@@ -198,6 +212,7 @@ test('uses all three', async () => {
198212#### Using fireEvent()
199213
200214** Before:**
215+
201216``` typescript
202217import { fireEvent , render , screen } from ' @testing-library/react-native' ;
203218
@@ -210,6 +225,7 @@ test('uses fireEvent', () => {
210225```
211226
212227** After:**
228+
213229``` typescript
214230import { fireEvent , render , screen } from ' @testing-library/react-native' ;
215231
@@ -224,6 +240,7 @@ test('uses fireEvent', async () => {
224240#### Using fireEvent methods
225241
226242** Before:**
243+
227244``` typescript
228245import { fireEvent , render , screen } from ' @testing-library/react-native' ;
229246
@@ -232,14 +249,15 @@ test('uses fireEvent methods', () => {
232249 const input = screen .getByPlaceholderText (' Enter text' );
233250 const button = screen .getByRole (' button' );
234251 const scrollView = screen .getByTestId (' scroll-view' );
235-
252+
236253 fireEvent .press (button );
237254 fireEvent .changeText (input , ' Hello' );
238255 fireEvent .scroll (scrollView , { nativeEvent: { contentOffset: { y: 100 } } });
239256});
240257```
241258
242259** After:**
260+
243261``` typescript
244262import { fireEvent , render , screen } from ' @testing-library/react-native' ;
245263
@@ -248,7 +266,7 @@ test('uses fireEvent methods', async () => {
248266 const input = screen .getByPlaceholderText (' Enter text' );
249267 const button = screen .getByRole (' button' );
250268 const scrollView = screen .getByTestId (' scroll-view' );
251-
269+
252270 await fireEvent .press (button );
253271 await fireEvent .changeText (input , ' Hello' );
254272 await fireEvent .scroll (scrollView , { nativeEvent: { contentOffset: { y: 100 } } });
@@ -258,6 +276,7 @@ test('uses fireEvent methods', async () => {
258276#### Skipping unsafe variants
259277
260278** Before:**
279+
261280``` typescript
262281import { act , renderHook , unsafe_act , unsafe_renderHookSync , renderAsync } from ' @testing-library/react-native' ;
263282
@@ -271,6 +290,7 @@ test('skips unsafe variants', () => {
271290```
272291
273292** After:**
293+
274294``` typescript
275295import { act , renderHook , unsafe_act , unsafe_renderHookSync , renderAsync } from ' @testing-library/react-native' ;
276296
@@ -286,6 +306,7 @@ test('skips unsafe variants', async () => {
286306#### Helper functions (not transformed by default)
287307
288308** Before:**
309+
289310``` typescript
290311function renderWithProviders(component : React .ReactElement ) {
291312 render (component ); // This is NOT transformed by default
@@ -297,6 +318,7 @@ test('uses helper', () => {
297318```
298319
299320** After (without CUSTOM_RENDER_FUNCTIONS):**
321+
300322``` typescript
301323function renderWithProviders(component : React .ReactElement ) {
302324 render (component ); // Unchanged - helper functions are skipped by default
@@ -312,6 +334,7 @@ test('uses helper', () => {
312334When you specify custom render function names via the ` CUSTOM_RENDER_FUNCTIONS ` environment variable, those functions will be transformed:
313335
314336** Before:**
337+
315338``` typescript
316339function renderWithProviders(component : React .ReactElement ) {
317340 render (component );
@@ -328,6 +351,7 @@ test('uses custom render', () => {
328351```
329352
330353** After (with CUSTOM_RENDER_FUNCTIONS="renderWithProviders,renderWithTheme"):**
354+
331355``` typescript
332356async function renderWithProviders(component : React .ReactElement ) {
333357 await render (component );
@@ -348,6 +372,7 @@ test('uses custom render', async () => {
348372` describe() ` blocks are grouping mechanisms and their callbacks are not made async, even if they contain ` render ` calls in helper functions. However, ` test() ` callbacks inside ` describe ` blocks are still made async.
349373
350374** Before:**
375+
351376``` typescript
352377import { render , screen } from ' @testing-library/react-native' ;
353378
@@ -369,6 +394,7 @@ describe('MyComponent', () => {
369394```
370395
371396** After:**
397+
372398``` typescript
373399import { render , screen } from ' @testing-library/react-native' ;
374400
0 commit comments