Full on testing framework ugh

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

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!');
   });
 });

vitest.config.js

@@ -0,0 +1,5 @@
+export default {
+  test: {
+    environment: 'jsdom',
+  },
+};