Updating SentryError to use hooks

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

@@ -9,7 +9,7 @@ exports[`SentryBoundary error handling 1`] = `
 exports[`SentryBoundary error handling 2`] = `
 <DocumentFragment>
   <span
-    data-component="withI18nextTranslation(SentryError)"
+    data-component="SentryError"
     data-props="{}"
   />
 </DocumentFragment>

src/components/SentryError/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as Sentry from '@sentry/browser';
-import { withTranslation, Trans } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import Message from 'components/Message';
 
@@ -13,19 +12,17 @@ const reportError = event => {
   }
 };
 
-export const SentryError = ({ t }) => (
-  <Message type="error" heading={ t('An error has occurred') }>
+export const SentryError = () => {
+  const { t } = useTranslation();
+
+  return <Message type="error" heading={ t('An error has occurred') }>
     <p>
       <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>
-);
-
-SentryError.propTypes = {
-  t: PropTypes.func.isRequired
+  </Message>;
 };
 
-export default withTranslation()(SentryError);
+export default SentryError;

src/components/SentryError/test.js

@@ -7,13 +7,12 @@ import React from 'react';
 import { render, fireEvent } from 'react-testing-library';
 import * as Sentry from '@sentry/browser';
 
-import { mockT } from 'i18n';
-import { SentryError } from 'components/SentryError';
+import SentryError from 'components/SentryError';
 
 describe('SentryError', () => {
   test('rendering', () => {
     const { asFragment } = render(
-      <SentryError t={ mockT }/>
+      <SentryError/>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -22,7 +21,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has been logged', () => {
       Sentry.lastEventId.mockReturnValue(1);
       const { getByTestId } = render(
-        <SentryError t={ mockT } />
+        <SentryError/>
       );
       const event = new MouseEvent('click', { bubbles: true });
       jest.spyOn(event, 'preventDefault');
@@ -35,7 +34,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has not been logged', () => {
       Sentry.lastEventId.mockReturnValue(false);
       const { getByTestId } = render(
-        <SentryError t={ mockT } />
+        <SentryError/>
       );
       const event = new MouseEvent('click', { bubbles: true });
       jest.spyOn(event, 'preventDefault');