Updating SentryBoundary to use react-testing-library

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

@@ -1,7 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SentryBoundary error handling 1`] = `<Child />`;
+exports[`SentryBoundary error handling 1`] = `
+<DocumentFragment>
+  Example content
+</DocumentFragment>
+`;
 
-exports[`SentryBoundary error handling 2`] = `<withI18nextTranslation(SentryError) />`;
+exports[`SentryBoundary error handling 2`] = `
+<DocumentFragment>
+  <span
+    data-component="withI18nextTranslation(SentryError)"
+    data-props="{}"
+  />
+</DocumentFragment>
+`;
 
-exports[`SentryBoundary rendering 1`] = `"Example content"`;
+exports[`SentryBoundary rendering 1`] = `
+<DocumentFragment>
+  Example content
+</DocumentFragment>
+`;

src/components/SentryBoundary/test.js

@@ -1,41 +1,53 @@
 jest.mock('@sentry/browser');
+jest.mock('components/SentryError', () =>
+  require('__mocks__/component-mock')('components/SentryError'));
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 import * as Sentry from '@sentry/browser';
 
 import SentryBoundary from 'components/SentryBoundary';
 
 describe('SentryBoundary', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <SentryBoundary>
         Example content
       </SentryBoundary>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('error handling', () => {
-    const Child = () => 'Example content';
+    // Hide React's console logging about the error
-    const component = shallow(
+    jest.spyOn(console, 'error').mockImplementation(() => {});
-      <SentryBoundary>
-        <Child />
-      </SentryBoundary>
-    );
-    expect(component).toMatchSnapshot();
 
     const error =new Error('Example error');
-    component.find('Child').simulateError(error);
+    const Child = ({ shouldThrow }) => {
-    // NOTE: Enzyme doesn't call getDerivedStateFromError yet, so we have to
+      if (shouldThrow) {
-    // set the state manually
+        throw error;
-    component.setState(SentryBoundary.getDerivedStateFromError(error));
+      }
+
+      return 'Example content';
+    };
+    const { asFragment, rerender } = render(
+      <SentryBoundary>
+        <Child shouldThrow={ false } />
+      </SentryBoundary>
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    rerender(
+      <SentryBoundary>
+        <Child shouldThrow={ true } />
+      </SentryBoundary>
+    );
 
     const scope = { setExtra: jest.fn() };
     expect(Sentry.withScope).toHaveBeenCalled();
 
     Sentry.withScope.mock.calls[0][0](scope);
     expect(Sentry.captureException).toHaveBeenCalledWith(error);
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });