refactor: Drop React test utils (#517)

4Catalyzer · Aug 26, 2019 · 10e4be1 · 10e4be1
1 parent 20a56c7
commit 10e4be1
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 130 deletions.
diff --git a/test/Router.test.js b/test/Router.test.js
@@ -2,7 +2,7 @@ import delay from 'delay';
 import MemoryProtocol from 'farce/lib/MemoryProtocol';
 import ServerProtocol from 'farce/lib/ServerProtocol';
 import React, { useEffect } from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
+import TestRenderer, { act } from 'react-test-renderer';
 
 import createFarceRouter from '../src/createFarceRouter';
 import HttpError from '../src/HttpError';
@@ -21,13 +21,15 @@ describe('Router', () => {
     });
 
     const resolver = new InstrumentedResolver();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Router resolver={resolver} />,
-    );
+    const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
     await delay(10);
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'error-404');
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="error-404"
+      />
+    `);
   });
 
   it('should support throwing HttpError in route render method', async () => {
@@ -46,14 +48,16 @@ describe('Router', () => {
     });
 
     const resolver = new InstrumentedResolver();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Router resolver={resolver} />,
-    );
+    const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
     await resolver.done;
     await delay(10);
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'error-404');
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="error-404"
+      />
+    `);
   });
 
   it('should support reloading the route configuration', async () => {
@@ -71,43 +75,47 @@ describe('Router', () => {
     });
 
     const resolver = new InstrumentedResolver();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Router resolver={resolver} />,
-    );
+    const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
     await resolver.done;
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'foo');
-    expect(
-      ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'bar'),
-    ).toHaveLength(0);
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="foo"
+      />
+    `);
 
-    instance.store.found.replaceRouteConfig([
-      {
-        path: '/foo',
-        getData: async () => {
-          await delay(10);
+    await act(async () => {
+      testRenderer.getInstance().store.found.replaceRouteConfig([
+        {
+          path: '/foo',
+          getData: async () => {
+            await delay(10);
+          },
+          render: () => <div className="bar" />,
         },
-        render: () => <div className="bar" />,
-      },
-    ]);
+      ]);
+
+      await delay(10);
+    });
 
     await resolver.done;
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'bar');
-    expect(
-      ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'foo'),
-    ).toHaveLength(0);
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="bar"
+      />
+    `);
   });
 
   describe('context', () => {
-    async function assertRouterContext(Component) {
+    async function getTestRenderer(Component) {
       const Router = createFarceRouter({
         historyProtocol: new MemoryProtocol('/foo'),
         routeConfig: [
           {
             path: '/foo',
-            Component,
+            render: () => <Component />,
           },
           {
             path: '/foo/bar',
@@ -117,15 +125,17 @@ describe('Router', () => {
       });
 
       const resolver = new InstrumentedResolver();
-      const instance = ReactTestUtils.renderIntoDocument(
-        <Router resolver={resolver} />,
-      );
+      const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
       await resolver.done;
-      await delay(10);
+
+      await act(async () => {
+        await delay(10);
+      });
+
       await resolver.done;
 
-      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'bar');
+      return testRenderer;
     }
 
     it('should provide router context for useRouter', async () => {
@@ -139,7 +149,12 @@ describe('Router', () => {
         return null;
       }
 
-      await assertRouterContext(MyComponent);
+      const testRenderer = await getTestRenderer(MyComponent);
+      expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+        <div
+          className="bar"
+        />
+      `);
     });
 
     it('should provide router context for withRouter', async () => {
@@ -155,7 +170,12 @@ describe('Router', () => {
         }
       }
 
-      await assertRouterContext(withRouter(MyComponent));
+      const testRenderer = await getTestRenderer(withRouter(MyComponent));
+      expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+        <div
+          className="bar"
+        />
+      `);
     });
   });
 });
diff --git a/test/hotRouteConfig.test.js b/test/hotRouteConfig.test.js
@@ -1,7 +1,7 @@
+import delay from 'delay';
 import ServerProtocol from 'farce/lib/ServerProtocol';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
+import TestRenderer, { act } from 'react-test-renderer';
 
 import createFarceRouter from '../src/createFarceRouter';
 import createRender from '../src/createRender';
@@ -10,15 +10,7 @@ import hotRouteConfig from '../src/hotRouteConfig';
 import { InstrumentedResolver } from './helpers';
 
 describe('hotRouteConfig', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-  });
-
   afterEach(() => {
-    ReactDOM.unmountComponentAtNode(container);
-
     /* eslint-env browser */
     // eslint-disable-next-line no-underscore-dangle
     delete window.__FOUND_HOT_RELOAD__;
@@ -41,31 +33,33 @@ describe('hotRouteConfig', () => {
     });
 
     const resolver = new InstrumentedResolver();
-    // eslint-disable-next-line react/no-render-return-value
-    const instance = ReactDOM.render(
-      <Router resolver={resolver} />,
-      container,
-    );
+    const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
     await resolver.done;
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'foo');
-    expect(
-      ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'bar'),
-    ).toHaveLength(0);
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="foo"
+      />
+    `);
 
-    hotRouteConfig([
-      {
-        path: '/foo',
-        render: () => <div className="bar" />,
-      },
-    ]);
+    await act(async () => {
+      hotRouteConfig([
+        {
+          path: '/foo',
+          render: () => <div className="bar" />,
+        },
+      ]);
+
+      await delay(10);
+    });
 
     await resolver.done;
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'bar');
-    expect(
-      ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'foo'),
-    ).toHaveLength(0);
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="bar"
+      />
+    `);
   });
 });
diff --git a/test/redirect.test.js b/test/redirect.test.js
@@ -1,7 +1,7 @@
 import delay from 'delay';
 import MemoryProtocol from 'farce/lib/MemoryProtocol';
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
+import TestRenderer, { act } from 'react-test-renderer';
 
 import createFarceRouter from '../src/createFarceRouter';
 import Redirect from '../src/Redirect';
@@ -23,40 +23,60 @@ describe('redirect', () => {
     });
 
     const resolver = new InstrumentedResolver();
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Router resolver={resolver} />,
-    );
+    const testRenderer = TestRenderer.create(<Router resolver={resolver} />);
 
     await resolver.done;
-    await delay(10);
 
-    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'bar');
+    // Let the redirect actually run.
+    await act(async () => {
+      await delay(10);
+    });
+
+    return testRenderer;
   }
 
   it('should support static redirects', async () => {
-    await assertRedirect(
+    const testRenderer = await assertRedirect(
       new Redirect({
         from: '/foo',
         to: '/bar',
       }),
     );
+
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="bar"
+      />
+    `);
   });
 
   it('should support function redirects', async () => {
-    await assertRedirect(
+    const testRenderer = await assertRedirect(
       new Redirect({
         from: '/foo',
         to: ({ location }) => location.pathname.replace('foo', 'bar'),
       }),
     );
+
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="bar"
+      />
+    `);
   });
 
   it('should support throwing RedirectException in route render method', async () => {
-    await assertRedirect({
+    const testRenderer = await assertRedirect({
       path: '/foo',
       render: () => {
         throw new RedirectException('/bar');
       },
     });
+
+    expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
+      <div
+        className="bar"
+      />
+    `);
   });
 });