Updating index page tests to use react-testing-library

src/pages/__snapshots__/index.test.js.snap

@@ -1,89 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Index Page rendering 1`] = `
-<Fragment>
+<DocumentFragment>
-  <withI18nextTranslation(Metadata)
+  <span
-    description="Test description"
+    data-component="withI18nextTranslation(Metadata)"
+    data-props="{
+  \\"description\\": \\"Test description\\"
+}"
   />
-  <noscript>
+  <noscript />
-    <Message
+  <span
-      heading="JavaScript Required"
+    data-component="withI18nextTranslation(App)"
-      type="error"
+    data-props="{
-    >
+  \\"syntaxList\\": [
-      <p>
+    {
-        You need JavaScript to use Regexper.
+      \\"id\\": \\"testJS\\",
-      </p>
+      \\"name\\": \\"Testing JS\\"
-      <p>
+    },
-        If you have concerns regarding the use of tracking code on Regexper, please see the 
+    {
-        <mockConstructor
+      \\"id\\": \\"other\\",
-          to="/privacy"
+      \\"name\\": \\"Other\\"
-        >
-          Privacy Policy
-        </mockConstructor>
-        .
-      </p>
-    </Message>
-  </noscript>
-  <withI18nextTranslation(App)
-    expr=""
-    permalinkUrl={null}
-    syntax="testJs"
-    syntaxList={
-      Array [
-        Object {
-          "id": "testJS",
-          "name": "Testing JS",
-        },
-        Object {
-          "id": "other",
-          "name": "Other",
-        },
-      ]
     }
+  ],
+  \\"syntax\\": \\"testJs\\",
+  \\"expr\\": \\"\\",
+  \\"permalinkUrl\\": null
+}"
   />
-</Fragment>
+</DocumentFragment>
 `;
 
 exports[`Index Page rendering with an expression on the URL 1`] = `
-<Fragment>
+<DocumentFragment>
-  <withI18nextTranslation(Metadata)
+  <span
-    description="Test description"
+    data-component="withI18nextTranslation(Metadata)"
+    data-props="{
+  \\"description\\": \\"Test description\\"
+}"
   />
-  <noscript>
+  <noscript />
-    <Message
+  <span
-      heading="JavaScript Required"
+    data-component="withI18nextTranslation(App)"
-      type="error"
+    data-props="{
-    >
+  \\"syntaxList\\": [
-      <p>
+    {
-        You need JavaScript to use Regexper.
+      \\"id\\": \\"testJS\\",
-      </p>
+      \\"name\\": \\"Testing JS\\"
-      <p>
+    },
-        If you have concerns regarding the use of tracking code on Regexper, please see the 
+    {
-        <mockConstructor
+      \\"id\\": \\"other\\",
-          to="/privacy"
+      \\"name\\": \\"Other\\"
-        >
-          Privacy Policy
-        </mockConstructor>
-        .
-      </p>
-    </Message>
-  </noscript>
-  <withI18nextTranslation(App)
-    expr="testing"
-    permalinkUrl="http://example.com"
-    syntax="test"
-    syntaxList={
-      Array [
-        Object {
-          "id": "testJS",
-          "name": "Testing JS",
-        },
-        Object {
-          "id": "other",
-          "name": "Other",
-        },
-      ]
     }
+  ],
+  \\"syntax\\": \\"test\\",
+  \\"expr\\": \\"testing\\",
+  \\"permalinkUrl\\": \\"http://example.com\\"
+}"
   />
-</Fragment>
+</DocumentFragment>
 `;

src/pages/index.test.js

@@ -1,5 +1,12 @@
+jest.mock('components/Metadata', () =>
+  require('__mocks__/component-mock')('components/Metadata'));
+jest.mock('components/Message', () =>
+  require('__mocks__/component-mock')('components/Message'));
+jest.mock('components/App', () =>
+  require('__mocks__/component-mock')('components/App'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 
 import { IndexPage } from 'pages/index';
 
@@ -18,19 +25,19 @@ const queryResult = {
 
 describe('Index Page', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <IndexPage location={{ hash: '' }} data={ queryResult } />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with an expression on the URL', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <IndexPage location={{
         hash: '#syntax=test&expr=testing',
         href: 'http://example.com'
       }} data={ queryResult } />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });