test: replace deprecated use of TestRenderer.create with @testing-library/react

Author: setchy

package.json

@@ -132,7 +132,6 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "18.3.2",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-test-renderer": "18.3.0",
     "@types/react-transition-group": "4.4.10",
     "autoprefixer": "10.4.19",
     "css-loader": "7.1.1",
@@ -145,7 +144,6 @@
     "nock": "13.5.4",
     "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
-    "react-test-renderer": "18.3.1",
     "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "tailwindcss": "3.4.3",

pnpm-lock.yaml

@@ -1,5 +1,4 @@
-import TestRenderer from 'react-test-renderer';
-
+import { render } from '@testing-library/react';
 import { mockedGitHubNotifications } from '../__mocks__/mockedData';
 import { AccountNotifications } from './AccountNotifications';
 
@@ -15,7 +14,7 @@ describe('components/AccountNotifications.tsx', () => {
       showAccountHostname: true,
     };
 
-    const tree = TestRenderer.create(<AccountNotifications {...props} />);
+    const tree = render(<AccountNotifications {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -26,7 +25,7 @@ describe('components/AccountNotifications.tsx', () => {
       showAccountHostname: true,
     };
 
-    const tree = TestRenderer.create(<AccountNotifications {...props} />);
+    const tree = render(<AccountNotifications {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });

src/components/AccountNotifications.test.tsx

@@ -1,7 +1,6 @@
-import * as TestRenderer from 'react-test-renderer';
-
 import { mockMathRandom } from './test-utils';
 
+import { render } from '@testing-library/react';
 import { AllRead } from './AllRead';
 
 describe('components/AllRead.tsx', () => {
@@ -10,7 +9,7 @@ describe('components/AllRead.tsx', () => {
   mockMathRandom(0.1);
 
   it('should render itself & its children', () => {
-    const tree = TestRenderer.create(<AllRead />);
+    const tree = render(<AllRead />);
 
     expect(tree).toMatchSnapshot();
   });

src/components/AllRead.test.tsx

@@ -1,18 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import * as TestRenderer from 'react-test-renderer';
-
 import { Logo } from './Logo';
 
 describe('components/Logo.tsx', () => {
   it('renders correctly (light)', () => {
-    const tree = TestRenderer.create(<Logo />);
+    const tree = render(<Logo />);
 
     expect(tree).toMatchSnapshot();
   });
 
   it('renders correctly(dark)', () => {
-    const tree = TestRenderer.create(<Logo isDark />);
+    const tree = render(<Logo isDark />);
 
     expect(tree).toMatchSnapshot();
   });

src/components/Logo.test.tsx

@@ -1,7 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import * as TestRenderer from 'react-test-renderer';
-
 import * as helpers from '../utils/helpers';
 
 import { shell } from 'electron';
@@ -30,7 +28,7 @@ describe('components/NotificationRow.tsx', () => {
       hostname: 'github.com',
     };
 
-    const tree = TestRenderer.create(<NotificationRow {...props} />);
+    const tree = render(<NotificationRow {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -47,7 +45,7 @@ describe('components/NotificationRow.tsx', () => {
       hostname: 'github.com',
     };
 
-    const tree = TestRenderer.create(<NotificationRow {...props} />);
+    const tree = render(<NotificationRow {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -64,7 +62,7 @@ describe('components/NotificationRow.tsx', () => {
       hostname: 'github.com',
     };
 
-    const tree = TestRenderer.create(<NotificationRow {...props} />);
+    const tree = render(<NotificationRow {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -82,7 +80,7 @@ describe('components/NotificationRow.tsx', () => {
         hostname: 'github.com',
       };
 
-      const tree = TestRenderer.create(<NotificationRow {...props} />);
+      const tree = render(<NotificationRow {...props} />);
       expect(tree).toMatchSnapshot();
     });
 
@@ -99,7 +97,7 @@ describe('components/NotificationRow.tsx', () => {
         hostname: 'github.com',
       };
 
-      const tree = TestRenderer.create(<NotificationRow {...props} />);
+      const tree = render(<NotificationRow {...props} />);
       expect(tree).toMatchSnapshot();
     });
 
@@ -116,7 +114,7 @@ describe('components/NotificationRow.tsx', () => {
         hostname: 'github.com',
       };
 
-      const tree = TestRenderer.create(<NotificationRow {...props} />);
+      const tree = render(<NotificationRow {...props} />);
       expect(tree).toMatchSnapshot();
     });
   });

src/components/NotificationRow.test.tsx

@@ -1,5 +1,4 @@
-import * as TestRenderer from 'react-test-renderer';
-
+import { render } from '@testing-library/react';
 import { Oops } from './Oops';
 
 describe('components/Oops.tsx', () => {
@@ -9,7 +8,7 @@ describe('components/Oops.tsx', () => {
       descriptions: ['Error description'],
       emojis: ['🔥'],
     };
-    const tree = TestRenderer.create(<Oops error={mockError} />);
+    const tree = render(<Oops error={mockError} />);
 
     expect(tree).toMatchSnapshot();
   });

src/components/Oops.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import TestRenderer from 'react-test-renderer';
 import { mockedGitHubNotifications } from '../__mocks__/mockedData';
 import { AppContext } from '../context/App';
 import { RepositoryNotifications } from './Repository';
@@ -26,7 +25,7 @@ describe('components/Repository.tsx', () => {
   });
 
   it('should render itself & its children', () => {
-    const tree = TestRenderer.create(
+    const tree = render(
       <AppContext.Provider value={{}}>
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
@@ -82,7 +81,7 @@ describe('components/Repository.tsx', () => {
   it('should use default repository icon when avatar is not available', () => {
     props.repoNotifications[0].repository.owner.avatar_url = '';
 
-    const tree = TestRenderer.create(
+    const tree = render(
       <AppContext.Provider value={{}}>
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,

src/components/Repository.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import * as TestRenderer from 'react-test-renderer';
 const { shell, ipcRenderer } = require('electron');
 import { mockSettings } from '../__mocks__/mock-state';
 import { mockedAccountNotifications } from '../__mocks__/mockedData';
@@ -29,7 +28,7 @@ describe('components/Sidebar.tsx', () => {
   });
 
   it('should render itself & its children (logged in)', () => {
-    const tree = TestRenderer.create(
+    const tree = render(
       <AppContext.Provider
         value={{
           settings: mockSettings,
@@ -45,7 +44,7 @@ describe('components/Sidebar.tsx', () => {
   });
 
   it('should render itself & its children (logged out)', () => {
-    const tree = TestRenderer.create(
+    const tree = render(
       <AppContext.Provider
         value={{ isLoggedIn: false, notifications: mockedAccountNotifications }}
       >