Migrate from react-test-renderer to @testing-library/react

catalog/app/components/BreadCrumbs/BreadCrumbs.spec.tsx

@@ -1,61 +1,55 @@
 import * as React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 
 import * as BreadCrumbs from './'
 
 describe('components/BreadCrumbs', () => {
   describe('Segment', () => {
     it('should render EMPTY', () => {
-      const tree = renderer.create(<BreadCrumbs.Segment />).toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(<BreadCrumbs.Segment />)
+      expect(container).toMatchSnapshot()
     })
     it('should render label', () => {
-      const tree = renderer.create(<BreadCrumbs.Segment label="Lorem ipsum" />).toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(<BreadCrumbs.Segment label="Lorem ipsum" />)
+      expect(container).toMatchSnapshot()
     })
     it('should render link', () => {
-      const tree = renderer
-        .create(
-          <MemoryRouter>
-            <BreadCrumbs.Segment label="A" to="/a" />
-          </MemoryRouter>,
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>
+          <BreadCrumbs.Segment label="A" to="/a" />
+        </MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
   })
   describe('render', () => {
     it('basic breadcrumbs', () => {
       const crumbs = BreadCrumbs.getCrumbs('aa a/bb-b/c/d_d', (x) => x, 'ROOT')
-      const tree = renderer
-        .create(<MemoryRouter>{BreadCrumbs.render(crumbs)}</MemoryRouter>)
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>{BreadCrumbs.render(crumbs)}</MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
     it('and transform links', () => {
       const crumbs = BreadCrumbs.getCrumbs('a/b', (x) => x, 'ROOT')
       const getLinkProps = ({ to }: { to?: string }) => ({
         href: `https://quiltdata.com/${to || ''}`,
       })
-      const tree = renderer
-        .create(
-          <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
     it('and make links for every crumb', () => {
       const crumbs = BreadCrumbs.getCrumbs('a/b', (x) => x, 'ROOT', { tailLink: true })
       const getLinkProps = ({ to }: { to?: string }) => ({
         href: `https://quiltdata.com/${to || ''}`,
       })
-      const tree = renderer
-        .create(
-          <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
     it('and end with separator', () => {
       const crumbs = BreadCrumbs.getCrumbs('a/b', (x) => x, 'ROOT', {
@@ -65,19 +59,17 @@ describe('components/BreadCrumbs', () => {
       const getLinkProps = ({ to }: { to?: string }) => ({
         href: `https://quiltdata.com/${to || ''}`,
       })
-      const tree = renderer
-        .create(
-          <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>{BreadCrumbs.render(crumbs, { getLinkProps })}</MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
     it('without root label', () => {
       const crumbs = BreadCrumbs.getCrumbs('a/b/c', (x) => x)
-      const tree = renderer
-        .create(<MemoryRouter>{BreadCrumbs.render(crumbs)}</MemoryRouter>)
-        .toJSON()
-      expect(tree).toMatchSnapshot()
+      const { container } = render(
+        <MemoryRouter>{BreadCrumbs.render(crumbs)}</MemoryRouter>,
+      )
+      expect(container).toMatchSnapshot()
     })
   })
   it('copyWithoutSpaces', () => {

catalog/app/components/BreadCrumbs/__snapshots__/BreadCrumbs.spec.tsx.snap

@@ -1,149 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/BreadCrumbs Segment should render EMPTY 1`] = `
-<i>
-  &lt;EMPTY&gt;
-</i>
+<div>
+  <i>
+    &lt;EMPTY&gt;
+  </i>
+</div>
 `;
 
-exports[`components/BreadCrumbs Segment should render label 1`] = `"Lorem ipsum"`;
+exports[`components/BreadCrumbs Segment should render label 1`] = `
+<div>
+  Lorem ipsum
+</div>
+`;
 
 exports[`components/BreadCrumbs Segment should render link 1`] = `
-<a
-  className="makeStyles-root-1"
-  href="/a"
-  onClick={[Function]}
->
-  A
-</a>
+<div>
+  <a
+    class="makeStyles-root-1"
+    href="/a"
+  >
+    A
+  </a>
+</div>
 `;
 
 exports[`components/BreadCrumbs render and end with separator 1`] = `
-[
+<div>
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-5"
     href="https://quiltdata.com/"
   >
     ROOT
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-5"
     href="https://quiltdata.com/a/"
   >
     a
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-5"
     href="https://quiltdata.com/a/b"
   >
     b
-  </a>,
-  " / ",
-]
+  </a>
+   / 
+</div>
 `;
 
 exports[`components/BreadCrumbs render and make links for every crumb 1`] = `
-[
+<div>
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-4"
     href="https://quiltdata.com/"
   >
     ROOT
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-4"
     href="https://quiltdata.com/a/"
   >
     a
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-4"
     href="https://quiltdata.com/a/b"
   >
     b
-  </a>,
-]
+  </a>
+</div>
 `;
 
 exports[`components/BreadCrumbs render and transform links 1`] = `
-[
+<div>
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-3"
     href="https://quiltdata.com/"
   >
     ROOT
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-3"
     href="https://quiltdata.com/a/"
   >
     a
-  </a>,
-  " / ",
-  "b",
-]
+  </a>
+   / 
+  b
+</div>
 `;
 
 exports[`components/BreadCrumbs render basic breadcrumbs 1`] = `
-[
+<div>
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-2"
     to=""
   >
     ROOT
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-2"
     href="/aa a/"
-    onClick={[Function]}
   >
     aa a
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-2"
     href="/aa a/bb-b/"
-    onClick={[Function]}
   >
     bb-b
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-2"
     href="/aa a/bb-b/c/"
-    onClick={[Function]}
   >
     c
-  </a>,
-  " / ",
-  "d_d",
-]
+  </a>
+   / 
+  d_d
+</div>
 `;
 
 exports[`components/BreadCrumbs render without root label 1`] = `
-[
+<div>
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-6"
     href="/a/"
-    onClick={[Function]}
   >
     a
-  </a>,
-  " / ",
+  </a>
+   / 
   <a
-    className="makeStyles-root-1"
+    class="makeStyles-root-6"
     href="/a/b/"
-    onClick={[Function]}
   >
     b
-  </a>,
-  " / ",
-  "c",
-]
+  </a>
+   / 
+  c
+</div>
 `;