From babab418c731591884fdd1ee4cb2c9f6a99d1618 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 24 Mar 2019 12:15:24 -0400
Subject: [PATCH] Replacing enzyme in SentryError tests

---
 .../SentryError/__snapshots__/test.js.snap    | 37 +++++++++++--------
 src/components/SentryError/index.js           |  4 +-
 src/components/SentryError/test.js            | 27 ++++++++------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/SentryError/__snapshots__/test.js.snap b/src/components/SentryError/__snapshots__/test.js.snap
index d967bff..bd27abf 100644
--- a/src/components/SentryError/__snapshots__/test.js.snap
+++ b/src/components/SentryError/__snapshots__/test.js.snap
@@ -1,21 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SentryError rendering 1`] = `
-<Message
-  heading="TRANSLATE(An error has occurred)"
-  type="error"
->
-  <p>
-    <Trans>
-      This error has been logged. You may also 
-      <a
-        href="#error-report"
-        onClick={[Function]}
+<DocumentFragment>
+  <span
+    data-component="Message"
+    heading="TRANSLATE(An error has occurred)"
+    type="error"
+  >
+    <p>
+      <span
+        data-component="Trans"
       >
-        fill out a report
-      </a>
-      .
-    </Trans>
-  </p>
-</Message>
+        This error has been logged. You may also 
+        <a
+          data-testid="error-report"
+          href="#error-report"
+        >
+          fill out a report
+        </a>
+        .
+      </span>
+    </p>
+  </span>
+</DocumentFragment>
 `;
diff --git a/src/components/SentryError/index.js b/src/components/SentryError/index.js
index f78f7ad..e0c1d94 100644
--- a/src/components/SentryError/index.js
+++ b/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>
diff --git a/src/components/SentryError/test.js b/src/components/SentryError/test.js
index 1b82779..dfb1641 100644
--- a/src/components/SentryError/test.js
+++ b/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() };
-      component.find('a').simulate('click', eventObj);
+      const event = new MouseEvent('click', { bubbles: true });
+      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() };
-      component.find('a').simulate('click', eventObj);
+      const event = new MouseEvent('click', { bubbles: true });
+      jest.spyOn(event, 'preventDefault');
+      fireEvent(getByTestId('error-report'), event);
 
-      expect(eventObj.preventDefault).toHaveBeenCalled();
+      expect(event.preventDefault).toHaveBeenCalled();
       expect(Sentry.showReportDialog).not.toHaveBeenCalled();
     });
   });