Merge branch 'main' into v13

# Conflicts:
#	jest-setup.ts

Author: mdjastrzebski

.github/workflows/ci.yml

@@ -56,11 +56,26 @@ jobs:
         uses: ./.github/actions/setup-deps
 
       - name: Test
-        run: yarn test:ci
+        run: yarn test:ci:coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v4
 
+
+  test-concurrent:
+    needs: [install-cache-deps]
+    runs-on: ubuntu-latest
+    name: Test (concurrent mode)
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js and deps
+        uses: ./.github/actions/setup-deps
+
+      - name: Test in concurrent mode
+        run: CONCURRENT_MODE=1 yarn test:ci
+
   test-website:
     runs-on: ubuntu-latest
     name: Test Website

.release-it.json

@@ -1,17 +1,47 @@
 {
+  "hooks": {
+    "before:init": ["yarn typecheck", "yarn test", "yarn lint"],
+    "after:bump": "yarn build",
+    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+  },
   "git": {
-    "commitMessage": "chore: release ${version}",
+    "commitMessage": "chore: release v${version}",
     "tagName": "v${version}"
   },
   "npm": {
     "publish": true
   },
   "github": {
-    "release": true
+    "release": true,
+    "releaseName": "v${version}"
   },
   "plugins": {
     "@release-it/conventional-changelog": {
-      "preset": "angular"
+      "preset": {
+        "name": "conventionalcommits",
+        "types": [
+          {
+            "type": "feat",
+            "section": "✨ Features"
+          },
+          {
+            "type": "perf",
+            "section": "💨 Performance Improvements"
+          },
+          {
+            "type": "fix",
+            "section": "🐛 Bug Fixes"
+          },
+          {
+            "type": "chore(deps)",
+            "section": "🛠️ Dependency Upgrades"
+          },
+          {
+            "type": "docs",
+            "section": "📚 Documentation"
+          }
+        ]
+      }
     }
   }
 }

README.md

@@ -49,7 +49,7 @@ You can use the built-in Jest matchers automatically by having any import from `
 ## Example
 
 ```jsx
-import { render, screen, fireEvent } from '@testing-library/react-native';
+import { render, screen, userEvent } from '@testing-library/react-native';
 import { QuestionsBoard } from '../QuestionsBoard';
 
 // It is recommended to use userEvent with fake timers
@@ -105,7 +105,6 @@ React Native Testing Library consists of following APIs:
 - [Migration to 12.0](https://callstack.github.io/react-native-testing-library/docs/migration/v12)
 - [Migration to built-in Jest Matchers](https://callstack.github.io/react-native-testing-library/docs/migration/jest-matchers)
 
-
 ## Troubleshooting
 
 - [Troubleshooting guide](https://callstack.github.io/react-native-testing-library/docs/guides/troubleshooting)

examples/basic/.eslintignore

@@ -0,0 +1 @@
+jest-setup.ts

examples/basic/components/AnimatedView.tsx

@@ -17,7 +17,7 @@ export function AnimatedView(props: AnimatedViewProps) {
       duration: props.fadeInDuration ?? 250,
       useNativeDriver: props.useNativeDriver ?? true,
     }).start();
-  }, [fadeAnim]);
+  }, [fadeAnim, props.fadeInDuration, props.useNativeDriver]);
 
   return (
     <Animated.View

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { Text } from 'react-native';
 import { act, render, screen } from '@testing-library/react-native';
 import { AnimatedView } from '../AnimatedView';
 
@@ -13,7 +15,7 @@ describe('AnimatedView', () => {
   it('should use native driver when useNativeDriver is true', async () => {
     render(
       <AnimatedView fadeInDuration={250} useNativeDriver={true}>
-        Test
+        <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });
@@ -25,7 +27,7 @@ describe('AnimatedView', () => {
   it('should not use native driver when useNativeDriver is false', async () => {
     render(
       <AnimatedView fadeInDuration={250} useNativeDriver={false}>
-        Test
+        <Text>Test</Text>
       </AnimatedView>,
     );
     expect(screen.root).toHaveStyle({ opacity: 0 });

examples/basic/jest-setup.ts

@@ -1,7 +1,9 @@
-/* eslint-disable no-undef, import/no-extraneous-dependencies */
+import { configure } from '@testing-library/react-native';
 
 // Import built-in Jest matchers
 import '@testing-library/react-native/extend-expect';
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+configure({ concurrentRoot: true });

examples/basic/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@testing-library/react-native": "^12.7.1",
+    "@testing-library/react-native": "^12.8.0",
     "@types/eslint": "^8.56.10",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.79",

examples/basic/yarn.lock

@@ -2463,9 +2463,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^12.7.1":
-  version: 12.7.1
-  resolution: "@testing-library/react-native@npm:12.7.1"
+"@testing-library/react-native@npm:^12.8.0":
+  version: 12.8.0
+  resolution: "@testing-library/react-native@npm:12.8.0"
   dependencies:
     jest-matcher-utils: "npm:^29.7.0"
     pretty-format: "npm:^29.7.0"
@@ -2478,7 +2478,7 @@ __metadata:
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 10c0/caaa4bdf97834b307b72af05c447ce40a2ba2ff40b464050bc29535caadf81981ea2873668445e633fdb3d13efccb136ef0932d6d9f4736bc6f7f98be98088d4
+  checksum: 10c0/216d40eefc3afa3259b37611213dcd6667cd0b8deb30521a8aaabe3afc15f07116ce64acba150f8c88b8e268df80639baf6bc38f05af1dbbae247e1d07639bde
   languageName: node
   linkType: hard
 
@@ -8923,7 +8923,7 @@ __metadata:
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
     "@babel/core": "npm:^7.24.0"
-    "@testing-library/react-native": "npm:^12.7.1"
+    "@testing-library/react-native": "npm:^12.8.0"
     "@types/eslint": "npm:^8.56.10"
     "@types/jest": "npm:^29.5.12"
     "@types/react": "npm:~18.2.79"

examples/cookbook/.eslintignore

@@ -1 +1,2 @@
-test-utils.*
+jest-setup.ts
+test-utils.*

examples/cookbook/jest-setup.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef, import/no-extraneous-dependencies */
+import { configure } from '@testing-library/react-native';
 
 // Import built-in Jest matchers
 import '@testing-library/react-native/extend-expect';
@@ -9,7 +9,11 @@ jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
 // Enable API mocking via Mock Service Worker (MSW)
 beforeAll(() => server.listen());
+
 // Reset any runtime request handlers we may add during the tests
 afterEach(() => server.resetHandlers());
+
 // Disable API mocking after the tests are done
 afterAll(() => server.close());
+
+configure({ concurrentRoot: true });

examples/cookbook/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@expo/metro-runtime": "~3.2.3",
-    "@testing-library/react-native": "^12.7.2",
+    "@testing-library/react-native": "^12.8.0",
     "@types/eslint": "^8.56.10",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",

examples/cookbook/yarn.lock

@@ -2833,9 +2833,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^12.7.2":
-  version: 12.7.2
-  resolution: "@testing-library/react-native@npm:12.7.2"
+"@testing-library/react-native@npm:^12.8.0":
+  version: 12.8.0
+  resolution: "@testing-library/react-native@npm:12.8.0"
   dependencies:
     jest-matcher-utils: "npm:^29.7.0"
     pretty-format: "npm:^29.7.0"
@@ -2848,7 +2848,7 @@ __metadata:
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 10c0/0e4e26bd211056646f8b5c80e9177efc90affe0ddc7e1a2c22742a4e6da7129ec1f9125c7d233adddeb27f429fb3eb91e3f3bfa9e77e176f042475574546b001
+  checksum: 10c0/216d40eefc3afa3259b37611213dcd6667cd0b8deb30521a8aaabe3afc15f07116ce64acba150f8c88b8e268df80639baf6bc38f05af1dbbae247e1d07639bde
   languageName: node
   linkType: hard
 
@@ -9762,7 +9762,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.20.0"
     "@expo/metro-runtime": "npm:~3.2.3"
-    "@testing-library/react-native": "npm:^12.7.2"
+    "@testing-library/react-native": "npm:^12.8.0"
     "@types/eslint": "npm:^8.56.10"
     "@types/jest": "npm:^29.5.12"
     "@types/react": "npm:~18.2.45"

jest-setup.ts

@@ -1,5 +1,9 @@
-import { resetToDefaults } from './src/pure';
+import { resetToDefaults, configure } from './src/pure';
+import './src/matchers/extend-expect';
 
 beforeEach(() => {
   resetToDefaults();
+  if (process.env.CONCURRENT_MODE === '1') {
+    configure({ concurrentRoot: true });
+  }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/react-native",
-  "version": "12.7.2",
+  "version": "12.8.0",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -25,15 +25,16 @@
   "scripts": {
     "clean": "del build",
     "test": "jest",
-    "test:ci": "jest --maxWorkers=2 --collectCoverage=true --coverage-provider=v8",
+    "test:ci": "jest --maxWorkers=2",
+    "test:ci:coverage": "jest --maxWorkers=2 --collectCoverage=true --coverage-provider=v8",
     "typecheck": "tsc",
     "copy-flowtypes": "cp typings/index.flow.js build",
     "lint": "eslint src --cache",
     "validate": "yarn lint && yarn typecheck && yarn test",
     "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 && yarn copy-flowtypes",
-    "publish": "yarn build && release-it"
+    "release": "release-it"
   },
   "files": [
     "build/",

src/__tests__/config.test.ts

@@ -1,5 +1,9 @@
 import { getConfig, configure, resetToDefaults, configureInternal } from '../config';
 
+beforeEach(() => {
+  resetToDefaults();
+});
+
 test('getConfig() returns existing configuration', () => {
   expect(getConfig().asyncUtilTimeout).toEqual(1000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
@@ -12,6 +16,7 @@ test('configure() overrides existing config values', () => {
     asyncUtilTimeout: 5000,
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: false,
+    concurrentRoot: false,
   });
 });
 

src/__tests__/render.test.tsx

@@ -241,3 +241,13 @@ test('render calls detects host component names', () => {
   render(<View testID="test" />);
   expect(getConfig().hostComponentNames).not.toBeUndefined();
 });
+
+test('supports legacy rendering', () => {
+  render(<View testID="test" />, { concurrentRoot: false });
+  expect(screen.root).toBeDefined();
+});
+
+test('supports concurrent rendering', () => {
+  render(<View testID="test" />, { concurrentRoot: true });
+  expect(screen.root).toBeDefined();
+});

src/config.ts

@@ -13,6 +13,12 @@ export type Config = {
 
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
+
+  /**
+   * Set to `true` to enable concurrent rendering.
+   * Otherwise `render` will default to legacy synchronous rendering.
+   */
+  concurrentRoot: boolean;
 };
 
 export type ConfigAliasOptions = {
@@ -37,6 +43,7 @@ export type InternalConfig = Config & {
 const defaultConfig: InternalConfig = {
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: false,
+  concurrentRoot: false,
 };
 
 let config = { ...defaultConfig };

src/render.tsx

@@ -1,4 +1,8 @@
-import type { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+import type {
+  ReactTestInstance,
+  ReactTestRenderer,
+  TestRendererOptions,
+} from 'react-test-renderer';
 import * as React from 'react';
 import { Profiler } from 'react';
 import act from './act';
@@ -13,7 +17,18 @@ import { setRenderResult } from './screen';
 import { getQueriesForElement } from './within';
 
 export interface RenderOptions {
+  /**
+   * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
+   *  reusable custom render functions for common data providers.
+   */
   wrapper?: React.ComponentType<any>;
+
+  /**
+   * Set to `true` to enable concurrent rendering.
+   * Otherwise `render` will default to legacy synchronous rendering.
+   */
+  concurrentRoot?: boolean | undefined;
+
   createNodeMock?: (element: React.ReactElement) => unknown;
   unstable_validateStringsRenderedWithinText?: boolean;
 }
@@ -38,11 +53,18 @@ export function renderInternal<T>(
 ) {
   const {
     wrapper: Wrapper,
+    concurrentRoot,
     detectHostComponentNames = true,
     unstable_validateStringsRenderedWithinText,
-    ...testRendererOptions
+    ...rest
   } = options || {};
 
+  const testRendererOptions: TestRendererOptions = {
+    ...rest,
+    // @ts-expect-error incomplete typing on RTR package
+    unstable_isConcurrent: concurrentRoot ?? getConfig().concurrentRoot,
+  };
+
   if (detectHostComponentNames) {
     configureHostComponentNamesIfNeeded();
   }