[POC] Custom test renderer

.github/workflows/ci.yml

@@ -61,21 +61,6 @@ jobs:
       - 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

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
-  "cSpell.words": ["labelledby", "Pressable", "RNTL", "Uncapitalize", "valuenow", "valuetext"]
+  "cSpell.words": [
+    "labelledby",
+    "Pressable",
+    "redent",
+    "RNTL",
+    "Uncapitalize",
+    "valuenow",
+    "valuetext"
+  ]
 }

jest-setup.ts

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

package.json

@@ -53,9 +53,9 @@
   },
   "peerDependencies": {
     "jest": ">=28.0.0",
-    "react": ">=16.8.0",
+    "react": ">=18.0.0",
     "react-native": ">=0.59",
-    "react-test-renderer": ">=16.8.0"
+    "universal-test-renderer": "0.5.0"
   },
   "peerDependenciesMeta": {
     "jest": {
@@ -71,12 +71,11 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@callstack/eslint-config": "^15.0.0",
-    "@react-native/babel-preset": "^0.76.1",
+    "@react-native/babel-preset": "0.77.0-nightly-20241107-0ca2ba082",
     "@release-it/conventional-changelog": "^9.0.2",
     "@relmify/jest-serializer-strip-ansi": "^1.0.2",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",
     "del-cli": "^6.0.0",
     "eslint": "^8.57.1",
@@ -85,12 +84,12 @@
     "flow-bin": "~0.170.0",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
-    "react": "18.3.1",
-    "react-native": "0.76.1",
-    "react-test-renderer": "18.3.1",
+    "react": "19.0.0-rc-fb9a90fa48-20240614",
+    "react-native": "0.77.0-nightly-20241107-0ca2ba082",
     "release-it": "^17.10.0",
     "strip-ansi": "^6.0.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "universal-test-renderer": "0.5.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

src/__tests__/__snapshots__/render-debug.test.tsx.snap

@@ -367,106 +367,6 @@ exports[`debug: another custom message 1`] = `
 </View>"
 `;
 
-exports[`debug: shallow 1`] = `
-"<View>
-  <Text>
-    Is the banana fresh?
-  </Text>
-  <Text
-    testID="bananaFresh"
-  >
-    not fresh
-  </Text>
-  <TextInput
-    placeholder="Add custom freshness"
-    testID="bananaCustomFreshness"
-    value="Custom Freshie"
-  />
-  <TextInput
-    defaultValue="What did you inspect?"
-    placeholder="Who inspected freshness?"
-    testID="bananaChef"
-    value="I inspected freshie"
-  />
-  <TextInput
-    defaultValue="What banana?"
-  />
-  <TextInput
-    defaultValue="hello"
-    value=""
-  />
-  <MyButton
-    onPress={[Function anonymous]}
-  >
-    Change freshness!
-  </MyButton>
-  <Text
-    testID="duplicateText"
-  >
-    First Text
-  </Text>
-  <Text
-    testID="duplicateText"
-  >
-    Second Text
-  </Text>
-  <Text>
-    0
-  </Text>
-</View>"
-`;
-
-exports[`debug: shallow with message 1`] = `
-"my other custom message
-
-<View>
-  <Text>
-    Is the banana fresh?
-  </Text>
-  <Text
-    testID="bananaFresh"
-  >
-    not fresh
-  </Text>
-  <TextInput
-    placeholder="Add custom freshness"
-    testID="bananaCustomFreshness"
-    value="Custom Freshie"
-  />
-  <TextInput
-    defaultValue="What did you inspect?"
-    placeholder="Who inspected freshness?"
-    testID="bananaChef"
-    value="I inspected freshie"
-  />
-  <TextInput
-    defaultValue="What banana?"
-  />
-  <TextInput
-    defaultValue="hello"
-    value=""
-  />
-  <MyButton
-    onPress={[Function anonymous]}
-  >
-    Change freshness!
-  </MyButton>
-  <Text
-    testID="duplicateText"
-  >
-    First Text
-  </Text>
-  <Text
-    testID="duplicateText"
-  >
-    Second Text
-  </Text>
-  <Text>
-    0
-  </Text>
-</View>"
-`;
-
 exports[`debug: with message 1`] = `
 "my custom message
 

src/__tests__/act.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import { act, fireEvent, render, screen } from '../';
+import '../matchers/extend-expect';
 
 type UseEffectProps = { callback(): void };
 const UseEffect = ({ callback }: UseEffectProps) => {
@@ -34,9 +35,9 @@ test('fireEvent should trigger useState', () => {
   render(<Counter />);
   const counter = screen.getByText(/Total count/i);
 
-  expect(counter.props.children).toEqual('Total count: 0');
+  expect(counter).toHaveTextContent('Total count: 0');
   fireEvent.press(counter);
-  expect(counter.props.children).toEqual('Total count: 1');
+  expect(counter).toHaveTextContent('Total count: 1');
 });
 
 test('should be able to not await act', () => {

src/__tests__/auto-cleanup.test.tsx

@@ -26,14 +26,14 @@ 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 unmounted before test ends', () => {
   const fn = jest.fn();
   render(<Test onUnmount={fn} />);
   expect(isMounted).toEqual(true);
   expect(fn).not.toHaveBeenCalled();
 });
 
-test('component is automatically umounted after first test ends', () => {
+test('component is automatically unmounted after first test ends', () => {
   expect(isMounted).toEqual(false);
 });
 

src/__tests__/config.test.ts

@@ -16,7 +16,6 @@ test('configure() overrides existing config values', () => {
     asyncUtilTimeout: 5000,
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: false,
-    concurrentRoot: false,
   });
 });
 

src/__tests__/fire-event.test.tsx

@@ -29,38 +29,12 @@ const WithoutEventComponent = (_props: WithoutEventComponentProps) => (
   </View>
 );
 
-type CustomEventComponentProps = {
-  onCustomEvent: () => void;
-};
-const CustomEventComponent = ({ onCustomEvent }: CustomEventComponentProps) => (
-  <TouchableOpacity onPress={onCustomEvent}>
-    <Text>Custom event component</Text>
-  </TouchableOpacity>
-);
-
-type MyCustomButtonProps = {
-  handlePress: () => void;
-  text: string;
-};
-const MyCustomButton = ({ handlePress, text }: MyCustomButtonProps) => (
-  <OnPressComponent onPress={handlePress} text={text} />
-);
-
-type CustomEventComponentWithCustomNameProps = {
-  handlePress: () => void;
-};
-const CustomEventComponentWithCustomName = ({
-  handlePress,
-}: CustomEventComponentWithCustomNameProps) => (
-  <MyCustomButton handlePress={handlePress} text="Custom component" />
-);
-
 describe('fireEvent', () => {
   test('should invoke specified event', () => {
     const onPressMock = jest.fn();
     render(<OnPressComponent onPress={onPressMock} text="Press me" />);
 
-    fireEvent(screen.getByText('Press me'), 'press');
+    fireEvent.press(screen.getByText('Press me'));
 
     expect(onPressMock).toHaveBeenCalled();
   });
@@ -70,7 +44,7 @@ describe('fireEvent', () => {
     const text = 'New press text';
     render(<OnPressComponent onPress={onPressMock} text={text} />);
 
-    fireEvent(screen.getByText(text), 'press');
+    fireEvent.press(screen.getByText(text));
     expect(onPressMock).toHaveBeenCalled();
   });
 
@@ -83,26 +57,11 @@ describe('fireEvent', () => {
     fireEvent(screen.getByText('Without event'), 'press');
     expect(onPressMock).not.toHaveBeenCalled();
   });
-
-  test('should invoke event with custom name', () => {
-    const handlerMock = jest.fn();
-    const EVENT_DATA = 'event data';
-
-    render(
-      <View>
-        <CustomEventComponent onCustomEvent={handlerMock} />
-      </View>,
-    );
-
-    fireEvent(screen.getByText('Custom event component'), 'customEvent', EVENT_DATA);
-
-    expect(handlerMock).toHaveBeenCalledWith(EVENT_DATA);
-  });
 });
 
 test('fireEvent.press', () => {
   const onPressMock = jest.fn();
-  const text = 'Fireevent press';
+  const text = 'FireEvent press';
   const eventData = {
     nativeEvent: {
       pageX: 20,
@@ -113,7 +72,8 @@ test('fireEvent.press', () => {
 
   fireEvent.press(screen.getByText(text), eventData);
 
-  expect(onPressMock).toHaveBeenCalledWith(eventData);
+  expect(onPressMock).toHaveBeenCalledTimes(1);
+  expect(onPressMock.mock.calls[0][0].nativeEvent).toMatchObject(eventData.nativeEvent);
 });
 
 test('fireEvent.scroll', () => {
@@ -161,26 +121,6 @@ it('sets native state value for unmanaged text inputs', () => {
   expect(input).toHaveDisplayValue('abc');
 });
 
-test('custom component with custom event name', () => {
-  const handlePress = jest.fn();
-
-  render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
-
-  fireEvent(screen.getByText('Custom component'), 'handlePress');
-
-  expect(handlePress).toHaveBeenCalled();
-});
-
-test('event with multiple handler parameters', () => {
-  const handlePress = jest.fn();
-
-  render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
-
-  fireEvent(screen.getByText('Custom component'), 'handlePress', 'param1', 'param2');
-
-  expect(handlePress).toHaveBeenCalledWith('param1', 'param2');
-});
-
 test('should not fire on disabled TouchableOpacity', () => {
   const handlePress = jest.fn();
   render(
@@ -250,8 +190,7 @@ test('should fire inside View with pointerEvents="box-none"', () => {
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  fireEvent(screen.getByText('Trigger'), 'onPress');
-  expect(onPress).toHaveBeenCalledTimes(2);
+  expect(onPress).toHaveBeenCalledTimes(1);
 });
 
 test('should fire inside View with pointerEvents="auto"', () => {
@@ -265,8 +204,7 @@ test('should fire inside View with pointerEvents="auto"', () => {
   );
 
   fireEvent.press(screen.getByText('Trigger'));
-  fireEvent(screen.getByText('Trigger'), 'onPress');
-  expect(onPress).toHaveBeenCalledTimes(2);
+  expect(onPress).toHaveBeenCalledTimes(1);
 });
 
 test('should not fire deeply inside View with pointerEvents="box-only"', () => {