Merge pull request #1208 from merodiro/rtl-migration

Conversion to React Testing Library
i18next · Dec 9, 2020 · ce174ac · ce174ac
2 parents d52bef4 + ff25ba1
commit ce174ac
Show file tree

Hide file tree

Showing 17 changed files with 711 additions and 653 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,11 @@
 {
-  "extends": ["airbnb", "prettier", "prettier/react"],
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react",
+    "plugin:testing-library/recommended",
+    "plugin:jest-dom/recommended"
+  ],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 8,

diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,5 @@ example/build/**/*
 dist/**/*
 .next
 package-lock.json
+yarn.lock
 out
diff --git a/package.json b/package.json
@@ -45,6 +45,9 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/react": "^16.8.2",
     "all-contributors-cli": "^6.1.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -56,15 +59,14 @@
     "cp-cli": "^2.0.0",
     "cross-env": "^6.0.3",
     "dtslint": "^0.9.1",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "enzyme-adapter-react-helper": "^1.3.2",
     "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "6.4.0",
-    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest-dom": "^3.6.3",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^3.0.3",
     "i18next": "^19.0.0",
     "jest": "24.8.0",
@@ -74,6 +76,7 @@
     "prettier": "2.2.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "2.6.3",
     "rollup": "1.19.4",
     "rollup-plugin-babel": "^4.3.2",
@@ -105,7 +108,6 @@
     "test": "cross-env BABEL_ENV=development jest --no-cache",
     "test:watch": "cross-env BABEL_ENV=development jest --no-cache --watch",
     "test:coverage": "cross-env BABEL_ENV=development jest --no-cache --coverage",
-    "test:coverageOldEnzymeAdapter": "enzyme-adapter-react-install 16 && cross-env BABEL_ENV=development jest --no-cache --coverage",
     "test:lint": "eslint ./src ./test",
     "test:typescript": "tslint --project tsconfig.json",
     "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json",

diff --git a/test/I18nextProvider.spec.js b/test/I18nextProvider.spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { I18nextProvider } from '../src/I18nextProvider';
 import { useTranslation } from '../src/useTranslation';
 
@@ -21,6 +21,7 @@ const instance = {
   hasResourceBundle: (lng, ns) => ns === 'translation',
   loadNamespaces: () => {},
   on: () => {},
+  off: () => {},
   options: {},
 };
 
@@ -35,14 +36,13 @@ describe('I18nextProvider', () => {
       return <div>{t('key1')}</div>;
     }
 
-    const wrapper = mount(
+    render(
       <I18nextProvider i18n={instance}>
         <TestComponent />
       </I18nextProvider>,
-      {},
     );
-    // console.log(wrapper.debug());
-    expect(wrapper.contains(<div>key1</div>)).toBe(true);
+
+    expect(screen.getByText('key1')).toBeInTheDocument();
   });
 
   it('should not rerender if value is not changed', () => {
@@ -53,14 +53,17 @@ describe('I18nextProvider', () => {
       return <div>{t('key1')}</div>;
     });
 
-    const wrapper = mount(
+    const { rerender } = render(
       <I18nextProvider i18n={instance}>
         <TestComponent />
       </I18nextProvider>,
-      {},
     );
     expect(count).toBe(1);
-    wrapper.setProps({ i18n: instance });
+    rerender(
+      <I18nextProvider i18n={instance}>
+        <TestComponent />
+      </I18nextProvider>,
+    );
     expect(count).toBe(1);
   });
 });
diff --git a/test/Translation.spec.js b/test/Translation.spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import './i18n';
 import { Translation } from '../src/Translation';
 
@@ -11,8 +11,11 @@ describe('Translation', () => {
   }
 
   it('should render correct content', () => {
-    const wrapper = mount(<TestComponent />);
-    // console.log(wrapper.debug());
-    expect(wrapper.contains(<div>test</div>)).toBe(true);
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        test
+      </div>
+    `);
   });
 });
diff --git a/test/setup.js b/test/setup.js
@@ -1,3 +1 @@
-import configure from 'enzyme-adapter-react-helper';
-
-configure();
+import '@testing-library/jest-dom';
diff --git a/test/trans.render.icu.spec.js b/test/trans.render.icu.spec.js
@@ -1,31 +1,32 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import './i18n';
 import { Trans } from '../src/Trans';
 
 describe('trans using no children but props - icu case', () => {
-  const TestElement = () => (
+  const TestComponent = () => (
     <Trans
       defaults="hello <0>{{what}}</0>"
       values={{ what: 'world' }}
-      components={[<strong>univers</strong>]}
+      components={[<strong>universe</strong>]}
     />
   );
   it('should render translated string', () => {
-    const wrapper = mount(<TestElement />);
-    // console.log(wrapper.debug());
-    expect(
-      wrapper.contains(
-        <div>
-          hello <strong>world</strong>
-        </div>,
-      ),
-    ).toBe(true);
+    const { container } = render(<TestComponent />);
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        hello 
+        <strong>
+          world
+        </strong>
+      </div>
+    `);
   });
 });
 
 describe('trans using no children but props - nested case', () => {
-  const TestElement = () => (
+  const TestComponent = () => (
     <Trans
       defaults="<0>hello <1></1> {{what}}</0>"
       values={{ what: 'world' }}
@@ -38,39 +39,39 @@ describe('trans using no children but props - nested case', () => {
     />
   );
   it('should render translated string', () => {
-    const wrapper = mount(<TestElement />);
-    // console.log(wrapper.debug());
-    expect(
-      wrapper.contains(
+    const { container } = render(<TestComponent />);
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
         <span>
-          hello <br /> world
-        </span>,
-      ),
-    ).toBe(true);
+          hello 
+          <br />
+           world
+        </span>
+      </div>
+    `);
   });
 });
 
 describe('trans using no children but props - self closing case', () => {
-  const TestElement = () => (
+  const TestComponent = () => (
     <Trans defaults="hello <0/>{{what}}" values={{ what: 'world' }} components={[<br />]} />
   );
   it('should render translated string', () => {
-    const wrapper = mount(<TestElement />);
-    // console.log(wrapper.debug());
-    expect(
-      wrapper.contains(
-        <div>
-          hello <br />
-          world
-        </div>,
-      ),
-    ).toBe(true);
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        hello 
+        <br />
+        world
+      </div>
+    `);
   });
 });
 
 describe('Trans should use value from translation', () => {
   it('should use value from translation if no data provided in component', () => {
-    const TestElement = () => (
+    const TestComponent = () => (
       <Trans
         i18nKey="testTrans5KeyWithValue"
         values={{
@@ -80,12 +81,21 @@ describe('Trans should use value from translation', () => {
       />
     );
 
-    const wrapper = mount(<TestElement />);
-    expect(wrapper.contains(<span className="awesome-styles">dragonfly</span>)).toBe(true);
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Result should be rendered within tag 
+        <span
+          class="awesome-styles"
+        >
+          dragonfly
+        </span>
+      </div>
+    `);
   });
 
   it('should use value from translation if dummy data provided in component', () => {
-    const TestElement = () => (
+    const TestComponent = () => (
       <Trans
         i18nKey="testTrans5KeyWithValue"
         values={{
@@ -95,7 +105,16 @@ describe('Trans should use value from translation', () => {
       />
     );
 
-    const wrapper = mount(<TestElement />);
-    expect(wrapper.contains(<span className="awesome-styles">dragonfly</span>)).toBe(true);
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Result should be rendered within tag 
+        <span
+          class="awesome-styles"
+        >
+          dragonfly
+        </span>
+      </div>
+    `);
   });
 });
diff --git a/test/trans.render.list.spec.js b/test/trans.render.list.spec.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import './i18n';
 import { Trans } from '../src/Trans';
 
 describe('Trans should render nested components', () => {
   it('should render dynamic ul as components property', () => {
     const list = ['li1', 'li2'];
 
-    const TestElement = () => (
+    const TestComponent = () => (
       <Trans
         i18nKey="testTrans4KeyWithNestedComponent"
         components={[
@@ -19,22 +19,27 @@ describe('Trans should render nested components', () => {
         ]}
       />
     );
-    const wrapper = mount(<TestElement />);
+    const { container } = render(<TestComponent />);
 
-    expect(
-      wrapper.contains(
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Result should be a list: 
         <ul>
-          <li>li1</li>
-          <li>li2</li>
-        </ul>,
-      ),
-    ).toBe(true);
+          <li>
+            li1
+          </li>
+          <li>
+            li2
+          </li>
+        </ul>
+      </div>
+    `);
   });
 
   it('should render dynamic ul as components property when pass as a children', () => {
     const list = ['li1', 'li2'];
 
-    const TestElement = () => (
+    const TestComponent = () => (
       <Trans i18nKey="testTrans5KeyWithNestedComponent">
         My list:
         <ul>
@@ -44,14 +49,19 @@ describe('Trans should render nested components', () => {
         </ul>
       </Trans>
     );
-    const wrapper = mount(<TestElement />);
-    expect(
-      wrapper.contains(
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Result should be a list: 
         <ul>
-          <li>li1</li>
-          <li>li2</li>
-        </ul>,
-      ),
-    ).toBe(true);
+          <li>
+            li1
+          </li>
+          <li>
+            li2
+          </li>
+        </ul>
+      </div>
+    `);
   });
 });