Replacing enzyme in SentryError tests

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

@@ -1,21 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SentryError rendering 1`] = `
-<Message
+<DocumentFragment>
-  heading="TRANSLATE(An error has occurred)"
+  <span
-  type="error"
+    data-component="Message"
->
+    heading="TRANSLATE(An error has occurred)"
-  <p>
+    type="error"
-    <Trans>
+  >
-      This error has been logged. You may also 
+    <p>
-      <a
+      <span
-        href="#error-report"
+        data-component="Trans"
-        onClick={[Function]}
       >
-        fill out a report
+        This error has been logged. You may also 
-      </a>
+        <a
-      .
+          data-testid="error-report"
-    </Trans>
+          href="#error-report"
-  </p>
+        >
-</Message>
+          fill out a report
+        </a>
+        .
+      </span>
+    </p>
+  </span>
+</DocumentFragment>
 `;

src/components/SentryError/index.js

@@ -16,7 +16,9 @@ const reportError = event => {
 export const SentryError = ({ t }) => (
   <Message type="error" heading={ t('An error has occurred') }>
     <p>
-      <Trans>This error has been logged. You may also <a href="#error-report"
+      <Trans>This error has been logged. You may also <a
+        href="#error-report"
+        data-testid="error-report"
         onClick={ reportError }>fill out a report</a>.</Trans>
     </p>
   </Message>

src/components/SentryError/test.js

@@ -1,7 +1,10 @@
 jest.mock('@sentry/browser');
 
+jest.mock('components/Message', () =>
+  require('__mocks__/component-mock')('components/Message'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, fireEvent } from 'react-testing-library';
 import * as Sentry from '@sentry/browser';
 
 import { mockT } from 'i18n';
@@ -9,34 +12,36 @@ import { SentryError } from 'components/SentryError';
 
 describe('SentryError', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <SentryError t={ mockT }/>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   describe('error reporting', () => {
     test('fill out a report when an event has been logged', () => {
       Sentry.lastEventId.mockReturnValue(1);
-      const component = shallow(
+      const { getByTestId } = render(
         <SentryError t={ mockT } />
       );
-      const eventObj = { preventDefault: jest.fn() };
+      const event = new MouseEvent('click', { bubbles: true });
-      component.find('a').simulate('click', eventObj);
+      jest.spyOn(event, 'preventDefault');
+      fireEvent(getByTestId('error-report'), event);
 
-      expect(eventObj.preventDefault).toHaveBeenCalled();
+      expect(event.preventDefault).toHaveBeenCalled();
       expect(Sentry.showReportDialog).toHaveBeenCalled();
     });
 
     test('fill out a report when an event has not been logged', () => {
       Sentry.lastEventId.mockReturnValue(false);
-      const component = shallow(
+      const { getByTestId } = render(
         <SentryError t={ mockT } />
       );
-      const eventObj = { preventDefault: jest.fn() };
+      const event = new MouseEvent('click', { bubbles: true });
-      component.find('a').simulate('click', eventObj);
+      jest.spyOn(event, 'preventDefault');
+      fireEvent(getByTestId('error-report'), event);
 
-      expect(eventObj.preventDefault).toHaveBeenCalled();
+      expect(event.preventDefault).toHaveBeenCalled();
       expect(Sentry.showReportDialog).not.toHaveBeenCalled();
     });
   });