feat: upgrade to react v18 (#1789)

package.json

@@ -84,11 +84,11 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "0.4.4",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.52",
+    "@types/react": "^18.3.3",
     "@vitest/coverage-v8": "^2.0.5",
     "all-contributors-cli": "^6.26.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -111,9 +111,9 @@
     "lint-staged": "^15.2.8",
     "mkdirp": "^3.0.1",
     "prettier": "^3.3.3",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.20.0",
     "typescript": "~5.5.4",

src/I18nextProvider.js

@@ -2,18 +2,6 @@ import { createElement, useMemo } from 'react';
 import { I18nContext } from './context.js';
 
 export function I18nextProvider({ i18n, defaultNS, children }) {
-  const value = useMemo(
-    () => ({
-      i18n,
-      defaultNS,
-    }),
-    [i18n, defaultNS],
-  );
-  return createElement(
-    I18nContext.Provider,
-    {
-      value,
-    },
-    children,
-  );
+  const value = useMemo(() => ({ i18n, defaultNS }), [i18n, defaultNS]);
+  return createElement(I18nContext.Provider, { value }, children);
 }

test/useSSR.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, vitest, beforeAll, afterAll, expect } from 'vitest';
-import { renderHook } from '@testing-library/react-hooks/server';
+import { renderHook } from '@testing-library/react';
 import i18n from './i18n';
 import { setI18n } from '../src/context';
 import { useSSR } from '../src/useSSR';

test/useTranslation.loading.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, vitest, beforeEach, expect } from 'vitest';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import i18n from './i18n';
 import { BackendMock } from './backendMock';
 import { useTranslation } from '../src/useTranslation';
@@ -23,26 +23,26 @@ describe('useTranslation loading ns', () => {
   });
 
   it('should wait for correct translation with suspense', async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useTranslation('common', { i18n: newI18n, useSuspense: true }),
-    );
-    expect(result.all).toHaveLength(0);
+    const all = [];
+    const { result } = renderHook(() => {
+      const value = useTranslation('common', { i18n: newI18n, useSuspense: true });
+      all.push(value);
+      return value;
+    });
+
+    expect(all).toHaveLength(0);
     backend.flush();
-    await waitForNextUpdate();
-    const { t } = result.current;
-    expect(t('key1')).toBe('test');
+    await waitFor(() => expect(result.current.t('key1')).toBe('test'));
   });
 
   it('should wait for correct translation without suspense', async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useTranslation('common', { i18n: newI18n, useSuspense: false }),
     );
-    const { t } = result.current;
-    expect(t('key1')).toBe('key1');
 
+    expect(result.current.t('key1')).toBe('key1');
     backend.flush();
-    await waitForNextUpdate();
-    expect(t('key1')).toBe('test');
+    await waitFor(() => expect(result.current.t('key1')).toBe('test'));
   });
 
   it('should return defaultValue if i18n instance not found', async () => {

test/useTranslation.loadingLng.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, vitest, beforeEach, afterEach, expect } from 'vitest';
-import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { renderHook, cleanup, waitFor } from '@testing-library/react';
 import i18n from './i18n';
 import { BackendLngAwareMock } from './backendLngAwareMock';
 import { useTranslation } from '../src/useTranslation';
@@ -23,14 +23,16 @@ describe('useTranslation loading ns with lng via props', () => {
   afterEach(cleanup);
 
   it('should wait for correct translation with suspense', async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useTranslation('common', { i18n: newI18n, useSuspense: true, lng: 'de' }),
-    );
-    expect(result.all).toHaveLength(0);
+    const all = [];
+    const { result } = renderHook(() => {
+      const value = useTranslation('common', { i18n: newI18n, useSuspense: true, lng: 'de' });
+      all.push(value);
+      return value;
+    });
+
+    expect(all).toHaveLength(0);
     backend.flush();
-    await waitForNextUpdate();
-    const { t } = result.current;
-    expect(t('key1')).toBe('de/common for key1');
+    await waitFor(() => expect(result.current.t('key1')).toBe('de/common for key1'));
   });
 
   it('should wait for correct translation without suspense', async () => {
@@ -63,24 +65,21 @@ describe('useTranslation loading ns with lng via props', () => {
 
   it('should correctly return and render correct translations in multiple useTranslation usages', async () => {
     {
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useTranslation('newns', { i18n: newI18n, useSuspense: true, lng: 'pt' }),
       );
 
       backend.flush();
-      await waitForNextUpdate();
-      const { t } = result.current;
-      expect(t('key1')).toBe('pt/newns for key1');
+      await waitFor(() => expect(result.current.t('key1')).toBe('pt/newns for key1'));
     }
 
     {
-      const { result, waitForNextUpdate } = renderHook(() =>
+      const { result } = renderHook(() =>
         useTranslation('newns', { i18n: newI18n, useSuspense: true, lng: 'de' }),
       );
+
       backend.flush({ language: 'de' });
-      await waitForNextUpdate();
-      const { t } = result.current;
-      expect(t('key1')).toBe('de/newns for key1');
+      await waitFor(() => expect(result.current.t('key1')).toBe('de/newns for key1'));
     }
 
     {

test/useTranslation.ready.spec.jsx

@@ -1,7 +1,6 @@
 import { describe, it, vitest, expect, beforeEach, afterEach } from 'vitest';
-import React from 'react';
-import { renderHook, cleanup as cleanupHook } from '@testing-library/react-hooks';
-import { render, cleanup } from '@testing-library/react';
+import React, { Suspense } from 'react';
+import { render, renderHook, cleanup, screen } from '@testing-library/react';
 import { useTranslation } from '../src/useTranslation';
 import hasLoadedNamespace from './hasLoadedNamespaceMock.js';
 
@@ -10,7 +9,6 @@ vitest.unmock('../src/useTranslation');
 describe('useTranslation', () => {
   afterEach(() => {
     cleanup();
-    cleanupHook();
   });
 
   let instance;
@@ -42,15 +40,14 @@ describe('useTranslation', () => {
     return <div>{t('keyOne')}</div>;
   }
 
-  it('should throw a suspense if not ready (having not all ns)', async () => {
-    expect(() => {
-      console.error = vitest.fn(); // silent down the error boundary error from react-dom
-
-      render(<TestComponentNotReady i18n={instance} />);
-    }).toThrow(
-      'TestComponentNotReady suspended while rendering, but no fallback UI was specified.',
+  it('should render suspense if not ready (having not all ns)', async () => {
+    render(
+      <Suspense fallback="Suspended">
+        <TestComponentNotReady i18n={instance} />
+      </Suspense>,
     );
-    expect(console.error).toHaveBeenCalled(); // silent down the error boundary error from react-dom
+
+    expect(screen.getByText('Suspended')).toBeInTheDocument();
   });
 
   it('should render correct content if ready (having all ns)', () => {

test/useTranslation.spec.jsx

@@ -1,6 +1,6 @@
 import { describe, it, vitest, expect, beforeAll, afterAll, afterEach } from 'vitest';
 import React from 'react';
-import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { renderHook, cleanup } from '@testing-library/react';
 import i18nInstance from './i18n';
 import { useTranslation } from '../src/useTranslation';
 import { setI18n } from '../src/context';
@@ -162,25 +162,19 @@ describe('useTranslation', () => {
   describe('replacing i18n instance in provider', () => {
     i18nInstance.addResource('fr', 'translation', 'key1', 'test2');
     const i18nInstanceClone = i18nInstance.cloneInstance({ lng: 'fr' });
-    const wrapper = ({ children, i18n }) => (
-      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+    const wrapper = ({ children }) => (
+      <I18nextProvider i18n={children?.props?.renderCallbackProps.i18n}>{children}</I18nextProvider>
     );
 
-    it('should render correct content', () => {
+    it('should render correct content', async () => {
       const { result, rerender } = renderHook(() => useTranslation(), {
         wrapper,
-        initialProps: {
-          i18n: i18nInstance,
-        },
+        initialProps: { i18n: i18nInstance },
       });
 
-      const { t: t1 } = result.current;
-      expect(t1('key1')).toBe('test');
-
+      expect(result.current.t('key1')).toBe('test');
       rerender({ i18n: i18nInstanceClone });
-
-      const { t: t2 } = result.current;
-      expect(t2('key1')).toBe('test2');
+      expect(result.current.t('key1')).toBe('test2');
     });
   });
 

test/useTranslation.usedNamespaces.spec.js

@@ -1,5 +1,5 @@
 import { describe, it, vitest, expect, afterEach } from 'vitest';
-import { renderHook, cleanup } from '@testing-library/react-hooks/server';
+import { renderHook, cleanup } from '@testing-library/react';
 import { useTranslation } from '../src/useTranslation';
 
 vitest.unmock('../src/useTranslation');
@@ -22,13 +22,15 @@ describe('useTranslation', () => {
       isInitialized: true,
       changeLanguage: () => {},
       getFixedT: () => (message) => message,
+      hasLoadedNamespace: () => false,
       hasResourceBundle: (lng, ns) => ns === 'ns1' || ns === 'ns2' || ns === 'ns3',
       loadNamespaces: () => {},
       on: () => {},
       off: () => {},
       options: {},
     };
     renderHook(() => useTranslation(['ns1', 'ns2', 'ns3'], { i18n }));
+
     expect(i18n.reportNamespaces.getUsedNamespaces()).toEqual(['ns1', 'ns2', 'ns3']);
   });
 });