feat: introducing @testing-library/react-hooks

.gitignore

@@ -22,4 +22,5 @@ example/build/**/*
 dist/**/*
 .next
 package-lock.json
+yarn.lock
 out

package.json

@@ -40,6 +40,7 @@
     "@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",

test/useTranslation.loading.spec.js

@@ -1,44 +1,10 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import sinon from 'sinon';
 import i18n from './i18n';
 import BackendMock from './backendMock';
 import { useTranslation } from '../src/useTranslation';
+import { renderHook } from '@testing-library/react-hooks';
 
 jest.unmock('../src/useTranslation');
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hasError: false,
-    };
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, info) {
-    const { spy } = this.props;
-    spy(error, info);
-  }
-
-  render() {
-    const { hasError } = this.state;
-    const { children } = this.props;
-
-    if (hasError) {
-      // You can render any custom fallback UI
-      return <div>Something went wrong.</div>;
-    }
-
-    return children;
-  }
-}
-
 describe('useTranslation loading ns', () => {
   let newI18n;
   let backend;
@@ -49,73 +15,32 @@ describe('useTranslation loading ns', () => {
     newI18n.use(backend).init({
       lng: 'en',
       fallbackLng: 'en',
-
       interpolation: {
         escapeValue: false, // not needed for react!!
       },
     });
   });
 
-  const TestElement = ({ useSuspense = true }) => {
-    const [t] = useTranslation('common', { i18n: newI18n, useSuspense });
-    return <div>{t('key1')}</div>;
-  };
-
-  it('should wait for correct translation', done => {
-    const spy = sinon.spy();
-
-    console.error = jest.fn(); // silent down the error boundary error from react-dom
-    let wrapper = mount(
-      <ErrorBoundary spy={spy}>
-        <TestElement />
-      </ErrorBoundary>,
+  it('should wait for correct translation RTL', async () => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useTranslation('common', { i18n: newI18n, useSuspense: true }),
     );
-
-    expect(wrapper.contains(<div>Something went wrong.</div>)).toBe(true);
-    expect(spy.callCount).toBe(1);
-
+    expect(result.current).toBe(null);
     backend.flush();
-
-    setTimeout(() => {
-      // mount again - no suspense recovering from promise resolve
-      wrapper = mount(
-        <ErrorBoundary spy={spy}>
-          <TestElement />
-        </ErrorBoundary>,
-      );
-
-      // console.log(wrapper.debug());
-      expect(wrapper.contains(<div>test</div>)).toBe(true);
-      done();
-    }, 500);
+    await waitForNextUpdate();
+    const { t } = result.current;
+    expect(t('key1')).toBe('test');
   });
 
-  it('should wait for correct translation without suspense', done => {
-    const spy = sinon.spy();
-
-    let wrapper = mount(
-      <ErrorBoundary spy={spy}>
-        <TestElement useSuspense={false} />
-      </ErrorBoundary>,
+  it('should wait for correct translation RTL', async () => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useTranslation('common', { i18n: newI18n, useSuspense: false }),
     );
-
-    expect(wrapper.contains(<div>key1</div>)).toBe(true);
-    expect(spy.callCount).toBe(0);
+    const { t } = result.current;
+    expect(t('key1')).toBe('key1');
 
     backend.flush();
-
-    setTimeout(() => {
-      // mount again with translation loaded
-      wrapper = mount(
-        <ErrorBoundary spy={spy}>
-          <TestElement useSuspense={false} />
-        </ErrorBoundary>,
-      );
-
-      // console.log(wrapper.debug());
-      expect(wrapper.contains(<div>test</div>)).toBe(true);
-      expect(spy.callCount).toBe(0);
-      done();
-    }, 500);
+    await waitForNextUpdate();
+    expect(t('key1')).toBe('test');
   });
 });