From f268079bcb6679909a4242f72f9bec773ebc8281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e?= <renee@kooi.me>
Date: Thu, 12 Dec 2024 19:35:36 +0000
Subject: [PATCH] support react 19 (#153)

* ci: add react 19 to the matrix

* pkg: add react 19 to supported range

* Full on testing framework ugh

* drop react 17
---
 .github/workflows/ci.yml |  4 ++--
 package.json             |  5 ++++-
 src/index.test.jsx       | 45 ++++++++++++++++++----------------------
 vitest.config.js         |  5 +++++
 4 files changed, 31 insertions(+), 28 deletions(-)
 create mode 100644 vitest.config.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e856d53..829277e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -21,8 +21,8 @@ jobs:
     name: Tests
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
-        react-version: [17.x, 18.x]
+        node-version: [18.x, 20.x, 22.x]
+        react-version: [18.x, 19.x]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout sources
diff --git a/package.json b/package.json
index acc5bc4..2894774 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
     "@rollup/plugin-babel": "^6.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@u-wave/react-translate-example": "file:example",
     "@u-wave/translate": "^1.1.0",
     "@vitest/coverage-v8": "^2.0.2",
@@ -24,6 +26,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
+    "jsdom": "^25.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
@@ -41,7 +44,7 @@
   "main": "dist/react-translate.js",
   "module": "dist/react-translate.es.js",
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "repository": {
     "type": "git",
diff --git a/src/index.test.jsx b/src/index.test.jsx
index c14843a..5317050 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -5,7 +5,7 @@ import {
 } from 'vitest';
 import React from 'react';
 import PropTypes from 'prop-types';
-import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import Translator from '@u-wave/translate';
 import {
   TranslateProvider,
@@ -21,18 +21,18 @@ describe('translate', () => {
 
   it('should inject a `t` prop', () => {
     const Component = translate()(({ t }) => (
-      <p>
+      <p data-testid="t">
         {t('test')}
       </p>
     ));
 
-    const renderer = TestRenderer.create((
+    render((
       <TranslateProvider translator={translator}>
         <Component />
       </TranslateProvider>
     ));
 
-    expect(renderer.toJSON().children).toEqual(['key']);
+    expect(screen.getByTestId('t').textContent).toEqual('key');
   });
 });
 
@@ -44,31 +44,30 @@ describe('Interpolate', () => {
   it('should accept React elements as interpolation data', () => {
     function Welcome({ name }) {
       return (
-        <Interpolate
-          i18nKey="welcome"
-          name={(
-            <strong>
-              {name}
-            </strong>
-          )}
-        />
+        <p data-testid="interpolate">
+          <Interpolate
+            i18nKey="welcome"
+            name={(
+              <strong>
+                {name}
+              </strong>
+            )}
+          />
+        </p>
       );
     }
     Welcome.propTypes = {
       name: PropTypes.string.isRequired,
     };
 
-    const renderer = TestRenderer.create((
+    render((
       <TranslateProvider translator={translator}>
         <Welcome name="World" />
       </TranslateProvider>
     ));
 
-    expect(renderer.toJSON()).toEqual([
-      'Welcome ',
-      { type: 'strong', props: {}, children: ['World'] },
-      '!',
-    ]);
+    expect(screen.getByTestId('interpolate').textContent).toEqual('Welcome World!');
+    expect(screen.getByTestId('interpolate').innerHTML).toEqual('Welcome <strong>World</strong>!');
   });
 });
 
@@ -82,22 +81,18 @@ describe('useTranslator', () => {
     function Component({ name }) {
       const { t } = useTranslator();
       return (
-        <p>
+        <p data-testid="use">
           {t('welcome', { name })}
         </p>
       );
     }
 
-    const renderer = TestRenderer.create((
+    render((
       <TranslateProvider translator={translator}>
         <Component name="nobody" />
       </TranslateProvider>
     ));
 
-    expect(renderer.toJSON()).toEqual({
-      type: 'p',
-      props: {},
-      children: ['Welcome nobody!'],
-    });
+    expect(screen.getByTestId('use').textContent).toEqual('Welcome nobody!');
   });
 });
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 0000000..a6dade2
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,5 @@
+export default {
+  test: {
+    environment: 'jsdom',
+  },
+};