improvement(testing): migrating from the deprecated react-test-renderer

Author: alwx

packages/core/package.json

@@ -110,7 +110,6 @@
     "prettier": "^2.0.5",
     "react": "18.3.1",
     "react-native": "0.77.1",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^4.1.1",
     "ts-jest": "^29.1.1",
     "typescript": "4.9.5",

packages/core/test/tracing/timetodisplay.test.tsx

@@ -14,8 +14,8 @@ jest.mock('../../src/js/utils/environment', () => ({
 }));
 
 import type { Event, Measurements, Span, SpanJSON} from '@sentry/core';
+import { render } from '@testing-library/react-native';
 import * as React from "react";
-import * as TestRenderer from 'react-test-renderer';
 
 import { timeToDisplayIntegration } from '../../src/js/tracing/integrations/timeToDisplayIntegration';
 import { SPAN_ORIGIN_MANUAL_UI_TIME_TO_DISPLAY } from '../../src/js/tracing/origin';
@@ -64,7 +64,7 @@ describe('TimeToDisplay', () => {
       },
        (activeSpan: Span | undefined) => {
         startTimeToInitialDisplaySpan();
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
         mockRecordedTimeToDisplay({
           ttid: {
             [spanToJSON(activeSpan!).span_id!]: nowInSeconds(),
@@ -93,8 +93,8 @@ describe('TimeToDisplay', () => {
         startTimeToInitialDisplaySpan();
         startTimeToFullDisplaySpan();
 
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
-        TestRenderer.create(<TimeToFullDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
+        render(<TimeToFullDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttid: {
@@ -126,7 +126,7 @@ describe('TimeToDisplay', () => {
       },
       (activeSpan: Span | undefined) => {
         startTimeToFullDisplaySpan();
-        TestRenderer.create(<TimeToFullDisplay record={true} />);
+        render(<TimeToFullDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttfd: {
@@ -156,7 +156,7 @@ describe('TimeToDisplay', () => {
         startTime: secondAgoTimestampMs(),
       },
       (activeSpan: Span | undefined) => {
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttid: {
@@ -186,8 +186,8 @@ describe('TimeToDisplay', () => {
         startTimeToInitialDisplaySpan();
         startTimeToFullDisplaySpan();
 
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
-        TestRenderer.create(<TimeToFullDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
+        render(<TimeToFullDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttid: {
@@ -221,8 +221,8 @@ describe('TimeToDisplay', () => {
         startTimeToInitialDisplaySpan();
         startTimeToFullDisplaySpan();
 
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
-        TestRenderer.create(<TimeToFullDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
+        render(<TimeToFullDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttid: {
@@ -261,8 +261,7 @@ describe('TimeToDisplay', () => {
         startTimeToInitialDisplaySpan();
         startTimeToFullDisplaySpan();
 
-        const timeToDisplayComponent = TestRenderer.create(<><TimeToInitialDisplay record={false} /><TimeToFullDisplay record={true}/></>);
-
+        const timeToDisplayComponent = render(<><TimeToInitialDisplay record={false} /><TimeToFullDisplay record={true}/></>);
         timeToDisplayComponent.update(<><TimeToInitialDisplay record={true} /><TimeToFullDisplay record={true}/></>);
 
         mockRecordedTimeToDisplay({
@@ -294,15 +293,15 @@ describe('TimeToDisplay', () => {
   test('should not log a warning if native component exists and not in new architecture', async () => {
     (isTurboModuleEnabled as jest.Mock).mockReturnValue(false);
 
-    TestRenderer.create(<TimeToInitialDisplay record={true} />);
+    render(<TimeToInitialDisplay record={true} />);
     await jest.runOnlyPendingTimersAsync(); // Flush setTimeout.
 
     expect(logger.warn).not.toHaveBeenCalled();
   });
 
   test('should log a warning if in new architecture', async () => {
     (isTurboModuleEnabled as jest.Mock).mockReturnValue(true);
-    TestRenderer.create(<TimeToInitialDisplay record={true} />);
+    render(<TimeToInitialDisplay record={true} />);
     await jest.runOnlyPendingTimersAsync(); // Flush setTimeout.
 
     expect(logger.warn).toHaveBeenCalledWith(

samples/expo/components/__tests__/StyledText-test.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import renderer from 'react-test-renderer';
-
+import { render, screen } from '@testing-library/react-native';
 import { MonoText } from '../StyledText';
 
 it(`renders correctly`, () => {
-  const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
+  render(<MonoText>MonoText Test</MonoText>);
 
-  expect(tree).toMatchSnapshot();
+  expect(screen.getAllByLabelText("MonoText Test")).toBeOnTheScreen();
 });

samples/react-native-macos/package.json

@@ -42,7 +42,6 @@
     "@react-native/typescript-config": "0.73.1",
     "@types/react": "^18.2.65",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
     "babel-plugin-module-resolver": "^5.0.0",

samples/react-native/__tests__/App-test.tsx

@@ -6,10 +6,9 @@ import React from 'react';
 
 // Note: import explicitly to use the types shipped with jest.
 import { it } from '@jest/globals';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
 
 it('dummy test', () => {
-  renderer.create(<div />);
+  render(<Text>Test</Text>);
 });

samples/react-native/package.json

@@ -56,11 +56,11 @@
     "@react-native/metro-config": "0.77.1",
     "@react-native/typescript-config": "0.77.1",
     "@sentry/babel-plugin-component-annotate": "4.1.1",
+    "@testing-library/react-native": "^13.2.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.0",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.6.3",
@@ -70,7 +70,6 @@
     "jest": "^29.6.3",
     "patch-package": "^8.0.0",
     "prettier": "2.8.8",
-    "react-test-renderer": "19.0.0",
     "sentry-react-native-samples-utils": "workspace:^",
     "ts-jest": "^29.2.5",
     "typescript": "5.0.4"