Conversion to React Testing Library

package.json

@@ -38,6 +38,8 @@
     "@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",
     "@types/react": "^16.8.2",
     "all-contributors-cli": "^6.1.1",
     "babel-core": "^7.0.0-bridge.0",

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,15 @@ 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);
+
+    // screen.debug()
+    expect(screen.getByText('key1')).toBeInTheDocument();
   });
 
   it('should not rerender if value is not changed', () => {
@@ -53,14 +55,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);
   });
 });

test/Translation.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import './i18n';
 import { Translation } from '../src/Translation';
 
@@ -11,8 +11,12 @@ 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 />);
+    // screen.debug()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        test
+      </div>
+    `);
   });
 });

test/setup.js

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import configure from 'enzyme-adapter-react-helper';
 
 configure();

test/trans.render.icu.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import './i18n';
 import { Trans } from '../src/Trans';
 
@@ -8,19 +8,21 @@ describe('trans using no children but props - icu case', () => {
     <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(<TestElement />);
+    // screen.debug()
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        hello 
+        <strong>
+          world
+        </strong>
+      </div>
+    `);
   });
 });
 
@@ -38,15 +40,18 @@ 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(<TestElement />);
+    // screen.debug()
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
         <span>
-          hello <br /> world
-        </span>,
-      ),
-    ).toBe(true);
+          hello 
+          <br />
+           world
+        </span>
+      </div>
+    `);
   });
 });
 
@@ -55,16 +60,15 @@ describe('trans using no children but props - self closing case', () => {
     <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(<TestElement />);
+    // screen.debug()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        hello 
+        <br />
+        world
+      </div>
+    `);
   });
 });
 
@@ -80,8 +84,17 @@ 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(<TestElement />);
+    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', () => {
@@ -95,7 +108,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(<TestElement />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Result should be rendered within tag 
+        <span
+          class="awesome-styles"
+        >
+          dragonfly
+        </span>
+      </div>
+    `);
   });
 });

test/trans.render.list.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import './i18n';
 import { Trans } from '../src/Trans';
 
@@ -19,16 +19,21 @@ describe('Trans should render nested components', () => {
         ]}
       />
     );
-    const wrapper = mount(<TestElement />);
+    const { container } = render(<TestElement />);
 
-    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', () => {
@@ -44,14 +49,19 @@ describe('Trans should render nested components', () => {
         </ul>
       </Trans>
     );
-    const wrapper = mount(<TestElement />);
-    expect(
-      wrapper.contains(
+    const { container } = render(<TestElement />);
+    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>
+    `);
   });
 });