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>
-  <noscript>
-    <style
-      type="text/css"
+<DocumentFragment>
+  <span
+    data-component="SentryBoundary"
+    data-props="{}"
+  >
+    <noscript />
+    <span
+      data-component="withI18nextTranslation(Header)"
+      data-props="{
+  \\"banner\\": \\"Test Banner\\"
+}"
+    />
+    <span
+      data-component="SentryBoundary"
+      data-props="{}"
     >
-      
-  [data-requires-js] {
-    display: none !important;
-  }
-
-    </style>
-  </noscript>
-  <withI18nextTranslation(Header)
-    banner="Test Banner"
-  />
-  <SentryBoundary>
-    Example content
-  </SentryBoundary>
-  <withI18nextTranslation(Footer)
-    buildId="test-buildid"
-  />
-</SentryBoundary>
+      Example content
+    </span>
+    <span
+      data-component="withI18nextTranslation(Footer)"
+      data-props="{
+  \\"buildId\\": \\"test-buildid\\"
+}"
+    />
+  </span>
+</DocumentFragment>
 `;

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();
   });
 });