Updating Layout to use react-testing-library

src/components/Layout/__snapshots__/test.js.snap

@@ -1,26 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout rendering 1`] = `
-<SentryBoundary>
+<DocumentFragment>
-  <noscript>
+  <span
-    <style
+    data-component="SentryBoundary"
-      type="text/css"
+    data-props="{}"
+  >
+    <noscript />
+    <span
+      data-component="withI18nextTranslation(Header)"
+      data-props="{
+  \\"banner\\": \\"Test Banner\\"
+}"
+    />
+    <span
+      data-component="SentryBoundary"
+      data-props="{}"
     >
-      
+      Example content
-  [data-requires-js] {
+    </span>
-    display: none !important;
+    <span
-  }
+      data-component="withI18nextTranslation(Footer)"
-
+      data-props="{
-    </style>
+  \\"buildId\\": \\"test-buildid\\"
-  </noscript>
+}"
-  <withI18nextTranslation(Header)
+    />
-    banner="Test Banner"
+  </span>
-  />
+</DocumentFragment>
-  <SentryBoundary>
-    Example content
-  </SentryBoundary>
-  <withI18nextTranslation(Footer)
-    buildId="test-buildid"
-  />
-</SentryBoundary>
 `;

src/components/Layout/test.js

@@ -1,15 +1,22 @@
+jest.mock('components/SentryBoundary', () =>
+  require('__mocks__/component-mock')('components/SentryBoundary'));
+jest.mock('components/Header', () =>
+  require('__mocks__/component-mock')('components/Header'));
+jest.mock('components/Footer', () =>
+  require('__mocks__/component-mock')('components/Footer'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 
 import { Layout } from 'components/Layout';
 
 describe('Layout', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Layout banner="Test Banner" buildId="test-buildid">
         Example content
       </Layout>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });