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

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

* Update & fixes for tests

* Update & fixes for tests

* Jest config fix

* Configuration fix

---------

Co-authored-by: Antonis Lilis <antonis.lilis@gmail.com>
Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com>

Author: 3 people

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

@@ -13,8 +13,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';
@@ -63,7 +63,7 @@ describe('TimeToDisplay', () => {
       },
        (activeSpan: Span | undefined) => {
         startTimeToInitialDisplaySpan();
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
         mockRecordedTimeToDisplay({
           ttid: {
             [spanToJSON(activeSpan!).span_id!]: nowInSeconds(),
@@ -92,8 +92,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: {
@@ -125,7 +125,7 @@ describe('TimeToDisplay', () => {
       },
       (activeSpan: Span | undefined) => {
         startTimeToFullDisplaySpan();
-        TestRenderer.create(<TimeToFullDisplay record={true} />);
+        render(<TimeToFullDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttfd: {
@@ -155,7 +155,7 @@ describe('TimeToDisplay', () => {
         startTime: secondAgoTimestampMs(),
       },
       (activeSpan: Span | undefined) => {
-        TestRenderer.create(<TimeToInitialDisplay record={true} />);
+        render(<TimeToInitialDisplay record={true} />);
 
         mockRecordedTimeToDisplay({
           ttid: {
@@ -185,8 +185,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: {
@@ -220,8 +220,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: {
@@ -260,8 +260,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({

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/jest.config.js

@@ -1,5 +1,6 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
+  preset: 'react-native',
   testMatch: [
     '<rootDir>/__tests__/**/*-test.ts',
     '<rootDir>/__tests__/**/*-test.tsx',

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