[v14] refactor: render async by default (#1846)

Author: mdjastrzebski

package.json

@@ -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",

…sts__/__snapshots__/render.test.tsx.snap …shots__/unsafe-render-sync.test.tsx.snapsrc/__tests__/__snapshots__/render.test.tsx.snap renamed to src/__tests__/__snapshots__/unsafe-render-sync.test.tsx.snap src/__tests__/__snapshots__/render.test.tsx.snap renamed to src/__tests__/__snapshots__/unsafe-render-sync.test.tsx.snap

@@ -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');

src/__tests__/act.test.tsx

@@ -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();
 });
 

src/__tests__/auto-cleanup-skip.test.tsx

@@ -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();
 });
@@ -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);
 });

src/__tests__/auto-cleanup.test.tsx

@@ -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() {
@@ -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);
 });

src/__tests__/cleanup.test.tsx

@@ -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 */}
@@ -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 */}

src/__tests__/event-handler.test.tsx

@@ -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"
@@ -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"
@@ -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"
@@ -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"