Skip to content

[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdjastrzebski merged 9 commits into from
Jan 5, 2026
Merged

[v14] refactor: render async by default #1846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a20db4d
refactor: make render async by default
mdjastrzebski Jan 4, 2026
93122ba
wip
mdjastrzebski Jan 4, 2026
46ec71b
render async
mdjastrzebski Jan 4, 2026
ed413fc
restore sync test
mdjastrzebski Jan 4, 2026
87ffd32
rename deprecated to unsafe_
mdjastrzebski Jan 5, 2026
bcbb278
tweaks
mdjastrzebski Jan 5, 2026
35df130
.
mdjastrzebski Jan 5, 2026
1f1f2bd
update docs
mdjastrzebski Jan 5, 2026
c4c0d11
docs
mdjastrzebski Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
"typecheck": "tsc",
"lint": "eslint src --cache",
"validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
"validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
"build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
"build:ts": "tsc --build tsconfig.release.json",
"build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down
0 ...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap
View file
Open in desktop
File renamed without changes.
12 changes: 6 additions & 6 deletions src/__tests__/act.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
const effectCallback = jest.fn();
render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
const effectCallback = jest.fn();
render(<UseEffect callback={effectCallback} />);
screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
render(<Counter />);
await render(<Counter />);
const counter = screen.getByText(/Total count/i);

expect(counter.props.children).toEqual('Total count: 0');
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/auto-cleanup-skip.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
const fn = jest.fn();
render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
expect(fn).not.toHaveBeenCalled();
});

Expand Down
12 changes: 6 additions & 6 deletions src/__tests__/auto-cleanup.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
const fn = jest.fn();
render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
expect(isMounted).toEqual(true);
expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
jest.useFakeTimers({ legacyFakeTimers: true });
render(<Test />);
await render(<Test />);
expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
jest.useFakeTimers();
render(<Test />);
await render(<Test />);
expect(isMounted).toEqual(true);
});
16 changes: 8 additions & 8 deletions src/__tests__/cleanup.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
const fn = jest.fn();

render(<Test onUnmount={fn} />);
render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
expect(fn).not.toHaveBeenCalled();

await cleanupAsync();
await cleanup();
expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
expect(fn).not.toHaveBeenCalled();

await cleanupAsync();
await cleanup();
expect(fn).toHaveBeenCalledTimes(2);
});
8 changes: 4 additions & 4 deletions src/__tests__/event-handler.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
const onPress = jest.fn();
const testOnlyOnPress = jest.fn();

render(
await render(
<View>
<Text testID="regular" onPress={onPress} />
{/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
const onPress = jest.fn();
const testOnlyOnPress = jest.fn();

render(
await render(
<View>
<Text testID="regular" onPress={onPress} />
{/* @ts-expect-error Intentionally passing such props */}
Expand Down
8 changes: 4 additions & 4 deletions src/__tests__/fire-event-textInput.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();

render(
await render(
<TextInput
editable={false}
testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();

render(
await render(
<TextInput
editable={false}
testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();

render(
await render(
<WrappedTextInput
editable={false}
testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();

render(
await render(
<DoubleWrappedTextInput
editable={false}
testID="subject"
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[v14] refactor: `render` async by default by mdjastrzebski · Pull Request #1846 · callstack/react-native-testing-library · GitHub
Skip to content
[v14] refactor: render async by default#1846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

mdjastrzebski
merged 9 commits into

from

Jan 5, 2026
 Merged


[v14] refactor: render async by default
#1846
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a20db4d

refactor: make render async by default


mdjastrzebski Jan 4, 2026
93122ba

wip


mdjastrzebski Jan 4, 2026
46ec71b

render async


mdjastrzebski Jan 4, 2026
ed413fc

restore sync test


mdjastrzebski Jan 4, 2026
87ffd32

rename deprecated to unsafe_


mdjastrzebski Jan 5, 2026
bcbb278

tweaks


mdjastrzebski Jan 5, 2026
35df130

.


mdjastrzebski Jan 5, 2026
1f1f2bd

update docs


mdjastrzebski Jan 5, 2026
c4c0d11

docs


mdjastrzebski Jan 5, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
 "typecheck": "tsc",
 "lint": "eslint src --cache",
 "validate": "yarn prettier && yarn lint && yarn typecheck && yarn test",
 "validate:write": "yarn prettier:write && yarn lint --fix && yarn typecheck && yarn test -u",
 "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
 "build:ts": "tsc --build tsconfig.release.json",
 "build": "yarn clean && yarn build:js && yarn build:ts",
Expand Down

0
...ests__/__snapshots__/render.test.tsx.snap → ...pshots__/unsafe-render-sync.test.tsx.snap

View file


Open in desktop


File renamed without changes.


12 changes: 6 additions & 6 deletions
src/__tests__/act.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,23 +16,23 @@ const Counter = () => {
 return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
};

test('render should trigger useEffect', () => {
test('render should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(1);
});

test('rerender should trigger useEffect', () => {
test('rerender should trigger useEffect', async () => {
 const effectCallback = jest.fn();
 render(<UseEffect callback={effectCallback} />);
 screen.rerender(<UseEffect callback={effectCallback} />);
await render(<UseEffect callback={effectCallback} />);
await screen.rerender(<UseEffect callback={effectCallback} />);

 expect(effectCallback).toHaveBeenCalledTimes(2);
});

test('fireEvent should trigger useState', async () => {
 render(<Counter />);
await render(<Counter />);
 const counter = screen.getByText(/Total count/i);

 expect(counter.props.children).toEqual('Total count: 0');
Expand Down

4 changes: 2 additions & 2 deletions
src/__tests__/auto-cleanup-skip.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,9 +29,9 @@ class Test extends React.Component<{ onUnmount?(): void }> {

// This just verifies that by importing RNTL in pure mode in an environment which supports
// afterEach (like jest) we won't get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();
});

Expand Down

12 changes: 6 additions & 6 deletions
src/__tests__/auto-cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -27,9 +27,9 @@ afterEach(() => {

// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
// we'll get automatic cleanup between tests.
test('component is mounted, but not umounted before test ends', () => {
test('component is mounted, but not umounted before test ends', async () => {
 const fn = jest.fn();
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(isMounted).toEqual(true);
 expect(fn).not.toHaveBeenCalled();
});
Expand All@@ -38,14 +38,14 @@ test('component is automatically umounted after first test ends', () => {
 expect(isMounted).toEqual(false);
});

test('does not time out with legacy fake timers', () => {
test('does not time out with legacy fake timers', async () => {
 jest.useFakeTimers({ legacyFakeTimers: true });
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

test('does not time out with fake timers', () => {
test('does not time out with fake timers', async () => {
 jest.useFakeTimers();
 render(<Test />);
await render(<Test />);
 expect(isMounted).toEqual(true);
});

16 changes: 8 additions & 8 deletions
src/__tests__/cleanup.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View } from 'react-native';

import { cleanupAsync, render, renderAsync } from '../pure';
import { cleanup, render, unsafe_renderSync } from '../pure';

class Test extends React.Component<{ onUnmount: () => void }> {
 componentWillUnmount() {
Expand All@@ -17,21 +17,21 @@ class Test extends React.Component<{ onUnmount: () => void }> {
test('cleanup after render', async () => {
 const fn = jest.fn();

 render(<Test onUnmount={fn} />);
 render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
await render(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

test('cleanup after renderAsync', async () => {
test('cleanup after unsafe_renderSync', async () => {
 const fn = jest.fn();

await renderAsync(<Test onUnmount={fn} />);
await renderAsync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
unsafe_renderSync(<Test onUnmount={fn} />);
 expect(fn).not.toHaveBeenCalled();

 await cleanupAsync();
 await cleanup();
 expect(fn).toHaveBeenCalledTimes(2);
});

8 changes: 4 additions & 4 deletions
src/__tests__/event-handler.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,11 +4,11 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { getEventHandlerFromProps } from '../event-handler';

test('getEventHandler strict mode', () => {
test('getEventHandler strict mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand All@@ -31,11 +31,11 @@ test('getEventHandler strict mode', () => {
 expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
});

test('getEventHandler loose mode', () => {
test('getEventHandler loose mode', async () => {
 const onPress = jest.fn();
 const testOnlyOnPress = jest.fn();

 render(
await render(
 <View>
 <Text testID="regular" onPress={onPress} />
 {/* @ts-expect-error Intentionally passing such props */}
Expand Down

8 changes: 4 additions & 4 deletions
src/__tests__/fire-event-textInput.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ test('should fire only non-touch-related events on non-editable TextInput', asyn
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -49,7 +49,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <TextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -100,7 +100,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <WrappedTextInput
 editable={false}
 testID="subject"
Expand DownExpand Up@@ -132,7 +132,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
 const onSubmitEditing = jest.fn();
 const onLayout = jest.fn();

 render(
await render(
 <DoubleWrappedTextInput
 editable={false}
 testID="subject"
Expand Down
Loading