From 53df10b74a739dbeb0a99391f43629b8744d472e Mon Sep 17 00:00:00 2001
From: Mike Williamson <mike@korora.ca>
Date: Tue, 14 Apr 2020 20:31:55 -0400
Subject: [PATCH] Fix lingui plural warning

This commit started with fixing a warning about plurals not working when the
app was loaded. Fixing that caused some breakage in the tests. Fixing that
revealed that none of the funkyness that broke was needed in the first place so
I'm ripping that out.

The result is everything is much cleaner and there are no warnings to be found
anywhere!
---
 frontend/src/__tests__/App.test.js            | 11 +---
 frontend/src/__tests__/CreateUserPage.test.js | 13 ++--
 .../src/__tests__/DmarcReportPage.test.js     | 11 +---
 frontend/src/__tests__/EmailField.test.js     |  9 +--
 frontend/src/__tests__/Footer.test.js         |  9 +--
 frontend/src/__tests__/LandingPage.test.js    |  9 +--
 .../__tests__/PasswordConfirmation.test.js    | 11 +---
 frontend/src/__tests__/PasswordField.test.js  | 13 ++--
 frontend/src/__tests__/PhaseBanner.test.js    |  9 +--
 frontend/src/__tests__/QRcodePage.test.js     |  9 +--
 frontend/src/__tests__/SignInPage.test.js     | 13 ++--
 frontend/src/__tests__/TopBanner.test.js      | 13 +---
 .../TwoFactorNotificationBar.test.js          |  9 +--
 frontend/src/__tests__/TwoFactorPage.test.js  | 19 +++---
 frontend/src/__tests__/UserCard.test.js       | 11 +---
 frontend/src/__tests__/UserList.test.js       | 17 ++---
 frontend/src/__tests__/UserPage.test.js       |  9 +--
 frontend/src/i18n.config.js                   |  7 ++-
 frontend/src/locales/en.js                    |  2 +-
 frontend/src/locales/en.po                    | 62 ++++++++++---------
 frontend/src/locales/fr.js                    |  2 +-
 frontend/src/locales/fr.po                    | 61 +++++++++---------
 22 files changed, 125 insertions(+), 204 deletions(-)

diff --git a/frontend/src/__tests__/App.test.js b/frontend/src/__tests__/App.test.js
index c9eb964fd0..2a7b54505d 100644
--- a/frontend/src/__tests__/App.test.js
+++ b/frontend/src/__tests__/App.test.js
@@ -7,12 +7,7 @@ import gql from 'graphql-tag'
 import { UserStateProvider } from '../UserState'
 import App from '../App'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 const resolvers = {
   Query: {
@@ -69,7 +64,7 @@ describe('<App/>', () => {
             initialState={{ userName: null, jwt: null, tfa: null }}
           >
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <MemoryRouter initialEntries={['/']} initialIndex={0}>
                   <MockedProvider resolvers={resolvers} mocks={mocks}>
                     <App />
@@ -92,7 +87,7 @@ describe('<App/>', () => {
             initialState={{ userName: null, jwt: null, tfa: null }}
           >
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <MemoryRouter initialEntries={['/domains']} initialIndex={0}>
                   <MockedProvider
                     mocks={mocks}
diff --git a/frontend/src/__tests__/CreateUserPage.test.js b/frontend/src/__tests__/CreateUserPage.test.js
index 39f0e7fcb9..76749fcd7d 100644
--- a/frontend/src/__tests__/CreateUserPage.test.js
+++ b/frontend/src/__tests__/CreateUserPage.test.js
@@ -6,12 +6,7 @@ import { MockedProvider } from '@apollo/react-testing'
 import { CreateUserPage } from '../CreateUserPage'
 import { CREATE_USER } from '../graphql/mutations'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 const resolvers = {
   Query: {
@@ -42,7 +37,7 @@ describe('<CreateUserPage />', () => {
         it('displays an error message', async () => {
           const { container, queryByText } = render(
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <MemoryRouter initialEntries={['/']} initialIndex={0}>
                   <MockedProvider mocks={mocks} resolvers={resolvers}>
                     <CreateUserPage />
@@ -68,7 +63,7 @@ describe('<CreateUserPage />', () => {
         it('displays an error message', async () => {
           const { container, queryByText } = render(
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <MemoryRouter initialEntries={['/']} initialIndex={0}>
                   <MockedProvider mocks={mocks} resolvers={resolvers}>
                     <CreateUserPage />
@@ -97,7 +92,7 @@ describe('<CreateUserPage />', () => {
         it('displays an error message', async () => {
           const { container, queryByText } = render(
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <MemoryRouter initialEntries={['/']} initialIndex={0}>
                   <MockedProvider mocks={mocks} resolvers={resolvers}>
                     <CreateUserPage />
diff --git a/frontend/src/__tests__/DmarcReportPage.test.js b/frontend/src/__tests__/DmarcReportPage.test.js
index 955706a919..0bc6c79a92 100644
--- a/frontend/src/__tests__/DmarcReportPage.test.js
+++ b/frontend/src/__tests__/DmarcReportPage.test.js
@@ -6,12 +6,7 @@ import { MockedProvider } from '@apollo/react-testing'
 import { DmarcReportPage } from '../DmarcReportPage'
 import { QUERY_DMARC_REPORT } from '../graphql/queries'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<DmarcReportPage />', () => {
   it('renders pass icons in sub-headers correctly', async () => {
@@ -65,7 +60,7 @@ describe('<DmarcReportPage />', () => {
 
     const { getByRole } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <MemoryRouter initialEntries={['/']} initialIndex={0}>
             <MockedProvider mocks={mocks} addTypename={false}>
               <DmarcReportPage />
@@ -137,7 +132,7 @@ describe('<DmarcReportPage />', () => {
 
     const { getByText, getByRole } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <MemoryRouter initialEntries={['/']} initialIndex={0}>
             <MockedProvider mocks={mocks} addTypename={false}>
               <DmarcReportPage />
diff --git a/frontend/src/__tests__/EmailField.test.js b/frontend/src/__tests__/EmailField.test.js
index 294ddcd965..23b4bad38f 100644
--- a/frontend/src/__tests__/EmailField.test.js
+++ b/frontend/src/__tests__/EmailField.test.js
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { EmailField } from '../EmailField'
 import { Formik } from 'formik'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<EmailField />', () => {
   describe('when validation fails', () => {
@@ -20,7 +15,7 @@ describe('<EmailField />', () => {
       })
 
       const { getByTestId, getByText } = render(
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <ThemeProvider theme={theme}>
             <Formik
               // return a sadness error for the password field
diff --git a/frontend/src/__tests__/Footer.test.js b/frontend/src/__tests__/Footer.test.js
index 7580332fd8..204b223e6b 100644
--- a/frontend/src/__tests__/Footer.test.js
+++ b/frontend/src/__tests__/Footer.test.js
@@ -3,12 +3,7 @@ import { I18nProvider } from '@lingui/react'
 import { ThemeProvider, theme } from '@chakra-ui/core'
 import { Footer } from '../Footer'
 import { render } from '@testing-library/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<Footer />', () => {
   beforeEach(() => (global.scrollTo = jest.fn()))
@@ -16,7 +11,7 @@ describe('<Footer />', () => {
   it('renders children correctly', () => {
     const { getAllByText } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <Footer>
             <div>foo</div>
           </Footer>
diff --git a/frontend/src/__tests__/LandingPage.test.js b/frontend/src/__tests__/LandingPage.test.js
index b604c30a5e..35ac04adc6 100644
--- a/frontend/src/__tests__/LandingPage.test.js
+++ b/frontend/src/__tests__/LandingPage.test.js
@@ -4,12 +4,7 @@ import { MemoryRouter } from 'react-router-dom'
 import { ThemeProvider, theme } from '@chakra-ui/core'
 import { LandingPage } from '../LandingPage'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<LandingPage />', () => {
   afterEach(cleanup)
@@ -18,7 +13,7 @@ describe('<LandingPage />', () => {
     render(
       <MemoryRouter initialEntries={['/']}>
         <ThemeProvider theme={theme}>
-          <I18nProvider i18n={i18n}>
+          <I18nProvider i18n={setupI18n()}>
             <LandingPage />
           </I18nProvider>
         </ThemeProvider>
diff --git a/frontend/src/__tests__/PasswordConfirmation.test.js b/frontend/src/__tests__/PasswordConfirmation.test.js
index 0571abf573..457f2c3575 100644
--- a/frontend/src/__tests__/PasswordConfirmation.test.js
+++ b/frontend/src/__tests__/PasswordConfirmation.test.js
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { PasswordConfirmation } from '../PasswordConfirmation'
 import { Formik } from 'formik'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<PasswordConfirmation />', () => {
   it('renders within a <Formik> wrapper', async () => {
@@ -20,7 +15,7 @@ describe('<PasswordConfirmation />', () => {
     })
 
     const { container } = render(
-      <I18nProvider i18n={i18n}>
+      <I18nProvider i18n={setupI18n()}>
         <ThemeProvider theme={theme}>
           <Formik
             // return a sadness error for the password field
@@ -47,7 +42,7 @@ describe('<PasswordConfirmation />', () => {
       })
 
       const { getByRole } = render(
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <ThemeProvider theme={theme}>
             <Formik
               // return a sadness error for the password field
diff --git a/frontend/src/__tests__/PasswordField.test.js b/frontend/src/__tests__/PasswordField.test.js
index 9617dbdf51..9b2009bc4a 100644
--- a/frontend/src/__tests__/PasswordField.test.js
+++ b/frontend/src/__tests__/PasswordField.test.js
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { PasswordField } from '../PasswordField'
 import { Formik } from 'formik'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<PasswordField />', () => {
   describe('when validation fails', () => {
@@ -19,7 +14,7 @@ describe('<PasswordField />', () => {
         password: string().required('sadness'),
       })
       const { getByTestId, getByText } = render(
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <ThemeProvider theme={theme}>
             <Formik
               // return a sadness error for the password field
@@ -45,7 +40,7 @@ describe('<PasswordField />', () => {
   describe('by default', () => {
     it('renders a password field', async () => {
       const { getByTestId } = render(
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <ThemeProvider theme={theme}>
             <Formik
               initialValues={{
@@ -69,7 +64,7 @@ describe('<PasswordField />', () => {
   describe('when the hide button is clicked', () => {
     it('renders a password field', async () => {
       const { getByRole } = render(
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <ThemeProvider theme={theme}>
             <Formik
               initialValues={{
diff --git a/frontend/src/__tests__/PhaseBanner.test.js b/frontend/src/__tests__/PhaseBanner.test.js
index 9350c2898c..4ddb63f9af 100644
--- a/frontend/src/__tests__/PhaseBanner.test.js
+++ b/frontend/src/__tests__/PhaseBanner.test.js
@@ -3,18 +3,13 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { render } from '@testing-library/react'
 import { PhaseBanner } from '../PhaseBanner'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<PhaseBanner />', () => {
   it('properly renders alpha banner', async () => {
     const { queryByText } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <PhaseBanner phase="ALPHA" />
         </I18nProvider>
       </ThemeProvider>,
diff --git a/frontend/src/__tests__/QRcodePage.test.js b/frontend/src/__tests__/QRcodePage.test.js
index bdc1498ff0..87f002945d 100644
--- a/frontend/src/__tests__/QRcodePage.test.js
+++ b/frontend/src/__tests__/QRcodePage.test.js
@@ -7,12 +7,7 @@ import { I18nProvider } from '@lingui/react'
 import { MockedProvider } from '@apollo/react-testing'
 import { UserStateProvider } from '../UserState'
 import { GENERATE_OTP_URL } from '../graphql/queries'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 const email = 'foo@example.com'
 const resolvers = {
@@ -51,7 +46,7 @@ describe('<QRcodePage />', () => {
           <MockedProvider mocks={mocks} resolvers={resolvers}>
             <MemoryRouter initialEntries={['/']}>
               <ThemeProvider theme={theme}>
-                <I18nProvider i18n={i18n}>
+                <I18nProvider i18n={setupI18n()}>
                   <QRcodePage />
                 </I18nProvider>
               </ThemeProvider>
diff --git a/frontend/src/__tests__/SignInPage.test.js b/frontend/src/__tests__/SignInPage.test.js
index e436185768..f45c93d6fe 100644
--- a/frontend/src/__tests__/SignInPage.test.js
+++ b/frontend/src/__tests__/SignInPage.test.js
@@ -9,12 +9,7 @@ import { MockedProvider } from '@apollo/react-testing'
 import gql from 'graphql-tag'
 import { UserStateProvider } from '../UserState'
 import App from '../App'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 const resolvers = {
   Query: {
@@ -58,7 +53,7 @@ describe('<SignInPage />', () => {
           initialState={{ userName: null, jwt: null, tfa: null }}
         >
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <MemoryRouter initialEntries={['/']} initialIndex={0}>
                 <MockedProvider resolvers={resolvers} mocks={mocks}>
                   <SignInPage />
@@ -88,7 +83,7 @@ describe('<SignInPage />', () => {
           initialState={{ userName: null, jwt: null, tfa: null }}
         >
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <MemoryRouter initialEntries={['/']} initialIndex={0}>
                 <MockedProvider
                   resolvers={resolvers}
@@ -168,7 +163,7 @@ describe('<SignInPage />', () => {
           initialState={{ userName: null, jwt: null, tfa: null }}
         >
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <Router history={history}>
                 <MockedProvider
                   resolvers={resolvers}
diff --git a/frontend/src/__tests__/TopBanner.test.js b/frontend/src/__tests__/TopBanner.test.js
index 8ea4ce9412..6b2fb807d8 100644
--- a/frontend/src/__tests__/TopBanner.test.js
+++ b/frontend/src/__tests__/TopBanner.test.js
@@ -3,12 +3,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { TopBanner } from '../TopBanner'
 import { render, cleanup } from '@testing-library/react'
 import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<TopBanner />', () => {
   afterEach(cleanup)
@@ -16,14 +11,12 @@ describe('<TopBanner />', () => {
   it('renders using the language prop correctly', () => {
     const { getByRole } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <TopBanner lang="en" />
         </I18nProvider>
       </ThemeProvider>,
     )
     const test = getByRole('img')
-    expect(test.getAttribute('alt')).toBe(
-      'Symbol of the Government of Canada',
-    )
+    expect(test.getAttribute('alt')).toBe('Symbol of the Government of Canada')
   })
 })
diff --git a/frontend/src/__tests__/TwoFactorNotificationBar.test.js b/frontend/src/__tests__/TwoFactorNotificationBar.test.js
index da8870fc4d..ccc1666fb4 100644
--- a/frontend/src/__tests__/TwoFactorNotificationBar.test.js
+++ b/frontend/src/__tests__/TwoFactorNotificationBar.test.js
@@ -4,19 +4,14 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { I18nProvider } from '@lingui/react'
 import { render } from '@testing-library/react'
 import { TwoFactorNotificationBar } from '../TwoFactorNotificationBar'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<TwoFactorNotificationBar />', () => {
   // XXX: rework this test
   it('successfully renders the component on its own.', () => {
     render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <MemoryRouter initialEntries={['/']} initialIndex={0}>
             <TwoFactorNotificationBar />
           </MemoryRouter>
diff --git a/frontend/src/__tests__/TwoFactorPage.test.js b/frontend/src/__tests__/TwoFactorPage.test.js
index 8b09cc1c90..e4e6d53dcb 100644
--- a/frontend/src/__tests__/TwoFactorPage.test.js
+++ b/frontend/src/__tests__/TwoFactorPage.test.js
@@ -8,12 +8,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { UserStateProvider } from '../UserState'
 import { I18nProvider } from '@lingui/react'
 import { MockedProvider } from '@apollo/react-testing'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 const resolvers = {
   Query: {
@@ -47,7 +42,7 @@ describe('<TwoFactorPage />', () => {
       <MockedProvider mocks={mocks} resolvers={resolvers}>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <TwoFactorPage />
             </I18nProvider>
           </ThemeProvider>
@@ -71,7 +66,7 @@ describe('<TwoFactorPage />', () => {
       <MockedProvider mocks={mocks} resolvers={resolvers}>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <TwoFactorPage />
             </I18nProvider>
           </ThemeProvider>
@@ -101,7 +96,7 @@ describe('<TwoFactorPage />', () => {
       <MockedProvider mocks={mocks} resolvers={resolvers}>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <TwoFactorPage />
             </I18nProvider>
           </ThemeProvider>
@@ -155,7 +150,7 @@ describe('<TwoFactorPage />', () => {
         }}
       >
         <ThemeProvider theme={theme}>
-          <I18nProvider i18n={i18n}>
+          <I18nProvider i18n={setupI18n()}>
             <MemoryRouter initialEntries={['/']} initialIndex={0}>
               <MockedProvider mocks={mocks} resolvers={resolvers}>
                 <App />
@@ -201,7 +196,7 @@ describe('<TwoFactorPage />', () => {
         }}
       >
         <ThemeProvider theme={theme}>
-          <I18nProvider i18n={i18n}>
+          <I18nProvider i18n={setupI18n()}>
             <MemoryRouter initialEntries={['/']} initialIndex={0}>
               <MockedProvider mocks={mocks} resolvers={resolvers}>
                 <App />
@@ -223,7 +218,7 @@ describe('<TwoFactorPage />', () => {
       <MockedProvider mocks={mocks} resolvers={resolvers}>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <TwoFactorPage />
             </I18nProvider>
           </ThemeProvider>
diff --git a/frontend/src/__tests__/UserCard.test.js b/frontend/src/__tests__/UserCard.test.js
index bd4489c96c..fdcd9c92b1 100644
--- a/frontend/src/__tests__/UserCard.test.js
+++ b/frontend/src/__tests__/UserCard.test.js
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
 import { I18nProvider } from '@lingui/react'
 import { MockedProvider } from '@apollo/react-testing'
 import { UserCard } from '../UserCard'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<UserCard />', () => {
   it('badges are green when TwoFactor and Admin values are true', async () => {
@@ -18,7 +13,7 @@ describe('<UserCard />', () => {
       <MockedProvider>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <UserCard
                 userName="testuser@testemail.gc.ca"
                 displayName="Test User"
@@ -46,7 +41,7 @@ describe('<UserCard />', () => {
       <MockedProvider>
         <MemoryRouter initialEntries={['/']}>
           <ThemeProvider theme={theme}>
-            <I18nProvider i18n={i18n}>
+            <I18nProvider i18n={setupI18n()}>
               <UserCard
                 userName="testuser@testemail.gc.ca"
                 displayName="Test User"
diff --git a/frontend/src/__tests__/UserList.test.js b/frontend/src/__tests__/UserList.test.js
index 586c385d9d..a93d1d96f4 100644
--- a/frontend/src/__tests__/UserList.test.js
+++ b/frontend/src/__tests__/UserList.test.js
@@ -1,22 +1,13 @@
 import React from 'react'
 import { UserList } from '../UserList'
-import {
-  render,
-  fireEvent,
-  waitFor,
-} from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import { MemoryRouter, Router } from 'react-router-dom'
 import { ThemeProvider, theme } from '@chakra-ui/core'
 import { I18nProvider } from '@lingui/react'
 import { MockedProvider } from '@apollo/react-testing'
 import { createMemoryHistory } from 'history'
 import { QUERY_USERLIST } from '../graphql/queries'
-import { i18n } from '@lingui/core'
-import { en } from 'make-plural/plurals'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
+import { setupI18n } from '@lingui/core'
 
 describe('<UserList />', () => {
   it('successfully renders with mocked data', async () => {
@@ -53,7 +44,7 @@ describe('<UserList />', () => {
     // Set the inital history item to user-list
     const { getAllByText } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <MemoryRouter initialEntries={['/']}>
             <MockedProvider mocks={mocks} addTypename={false}>
               <UserList />
@@ -112,7 +103,7 @@ describe('<UserList />', () => {
     // Set the inital history item to user-list
     const { getAllByText } = render(
       <ThemeProvider theme={theme}>
-        <I18nProvider i18n={i18n}>
+        <I18nProvider i18n={setupI18n()}>
           <Router history={history}>
             <MockedProvider mocks={mocks} addTypename={false}>
               <UserList />
diff --git a/frontend/src/__tests__/UserPage.test.js b/frontend/src/__tests__/UserPage.test.js
index df031327f3..f82dd29675 100644
--- a/frontend/src/__tests__/UserPage.test.js
+++ b/frontend/src/__tests__/UserPage.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { UserPage } from '../UserPage'
-import { i18n } from '@lingui/core'
+import { setupI18n } from '@lingui/core'
 import { render, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { ThemeProvider, theme } from '@chakra-ui/core'
@@ -8,11 +8,6 @@ import { I18nProvider } from '@lingui/react'
 import { MockedProvider } from '@apollo/react-testing'
 import { UserStateProvider } from '../UserState'
 import { QUERY_USER } from '../graphql/queries'
-import { en } from 'make-plural'
-
-i18n.loadLocaleData('en', { plurals: en })
-i18n.load('en', { en: {} })
-i18n.activate('en')
 
 describe('<UserPage />', () => {
   const userName = 'testuser@testemail.gc.ca'
@@ -56,7 +51,7 @@ describe('<UserPage />', () => {
         <MockedProvider mocks={mocks} addTypename={false}>
           <MemoryRouter initialEntries={['/']}>
             <ThemeProvider theme={theme}>
-              <I18nProvider i18n={i18n}>
+              <I18nProvider i18n={setupI18n()}>
                 <UserPage />
               </I18nProvider>
             </ThemeProvider>
diff --git a/frontend/src/i18n.config.js b/frontend/src/i18n.config.js
index fcfb87aa38..7f40d96687 100644
--- a/frontend/src/i18n.config.js
+++ b/frontend/src/i18n.config.js
@@ -1,4 +1,7 @@
 import { i18n } from '@lingui/core'
+import { fr, en } from 'make-plural/plurals'
+i18n.loadLocaleData('en', { plurals: en })
+i18n.loadLocaleData('fr', { plurals: fr })
 
 export const locales = {
   en: 'English',
@@ -7,16 +10,16 @@ export const locales = {
 
 export async function activate(locale) {
   let catalog
-
   try {
     catalog = await import(
       /* webpackChunkName: "i18n-[index]" */ `@lingui/loader!./locales/${locale}.po`
     )
   } catch (e) {
     // this fails only during tests due to webpack errors.
+    catalog = {messages: {}}
   }
 
-  i18n.load(locale, catalog)
+  i18n.load(locale, catalog.messages)
   i18n.activate(locale)
 }
 
diff --git a/frontend/src/locales/en.js b/frontend/src/locales/en.js
index 8d8a2c19c9..64adeb9bf5 100644
--- a/frontend/src/locales/en.js
+++ b/frontend/src/locales/en.js
@@ -1 +1 @@
-/* eslint-disable */module.exports={localeData:{"plurals":function(n,ord){var s=String(n).split("."),v0=!s[1],t0=Number(s[0])==n,n10=t0&&s[0].slice(-1),n100=t0&&s[0].slice(-2);if(ord)return n10==1&&n100!=11?"one":n10==2&&n100!=12?"two":n10==3&&n100!=13?"few":"other";return n==1&&v0?"one":"other"}},messages:{"Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.":"Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.","Create Account":"Create Account","Domains":"Domains","Forgot your password?":"Forgot your password?","Home":"Home","Loading...":"Loading...","Page not found":"Page not found","Pre-Alpha":"Pre-Alpha","Privacy":"Privacy","Scan this QR code with a 2FA app like Authy or Google Authenticator":"Scan this QR code with a 2FA app like Authy or Google Authenticator","Sign In":"Sign In","Sign Out":"Sign Out","Sign in with your username and password.":"Sign in with your username and password.","Skip to main content":"Skip to main content","Sorry, the page you were trying to view does not exist.":"Sorry, the page you were trying to view does not exist.","Terms & conditions":"Terms & conditions","This is the full list of domains":"This is the full list of domains","This service is being developed in the open":"This service is being developed in the open","Track web security compliance":"Track web security compliance","Your 2FA app will then have a valid code that you can use when you sign in.":"Your 2FA app will then have a valid code that you can use when you sign in."}};
\ No newline at end of file
+/*eslint-disable*/module.exports={messages:{"Admin":"Admin","Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.":"Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.","Create Account":"Create Account","Create User":"Create User","DMARC":"DMARC","Domains":"Domains","Email {0}":["Email ",["0"]],"Forgot your password?":"Forgot your password?","Home":"Home","Loading...":"Loading...","Page not found":"Page not found","Pre-Alpha":"Pre-Alpha","Privacy":"Privacy","Scan this QR code with a 2FA app like Authy or Google Authenticator":"Scan this QR code with a 2FA app like Authy or Google Authenticator","Sign In":"Sign In","Sign in with your username and password.":"Sign in with your username and password.","Skip to main content":"Skip to main content","Sorry, the page you were trying to view does not exist.":"Sorry, the page you were trying to view does not exist.","Terms & conditions":"Terms & conditions","This is the full list of domains":"This is the full list of domains","This service is being developed in the open":"This service is being developed in the open","Track web security compliance":"Track web security compliance","TwoFactor":"TwoFactor","User List":"User List","User Profile":"User Profile","Your 2FA app will then have a valid code that you can use when you sign in.":"Your 2FA app will then have a valid code that you can use when you sign in."}};
\ No newline at end of file
diff --git a/frontend/src/locales/en.po b/frontend/src/locales/en.po
index 8a363b8d00..7aa03c996d 100644
--- a/frontend/src/locales/en.po
+++ b/frontend/src/locales/en.po
@@ -13,7 +13,7 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/UserList.js:144
+#: src/UserCard.js:45
 msgid "Admin"
 msgstr "Admin"
 
@@ -21,38 +21,37 @@ msgstr "Admin"
 msgid "Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure."
 msgstr "Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure."
 
-#: src/SignInPage.js:146
+#: src/SignInPage.js:137
 msgid "Create Account"
 msgstr "Create Account"
 
-#: src/UserList.js:88
+#: src/UserList.js:47
 msgid "Create User"
 msgstr "Create User"
 
-#: src/App.js:60
-#: src/DomainsPage.js:24
+#: src/App.js:69
+msgid "DMARC"
+msgstr "DMARC"
+
+#: src/App.js:53
+#: src/DomainsPage.js:18
 msgid "Domains"
 msgstr "Domains"
 
-
 #: src/EmailField.js:31
 msgid "Email {0}"
 msgstr "Email {0}"
 
-#: src/SignInPage.js:116
+#: src/SignInPage.js:119
 msgid "Forgot your password?"
 msgstr "Forgot your password?"
 
-#: src/App.js:57
+#: src/App.js:50
+#: src/QRcodePage.js:67
 msgid "Home"
 msgstr "Home"
 
-#: src/UserList.js:154
-msgid "Language: {0}"
-msgstr "Language: {0}"
-
-
-#: src/QRcodePage.js:19
+#: src/QRcodePage.js:21
 msgid "Loading..."
 msgstr "Loading..."
 
@@ -60,28 +59,29 @@ msgstr "Loading..."
 msgid "Page not found"
 msgstr "Page not found"
 
-#: src/App.js:50
+#: src/App.js:43
 msgid "Pre-Alpha"
 msgstr "Pre-Alpha"
 
-#: src/App.js:129
+#: src/App.js:121
 msgid "Privacy"
 msgstr "Privacy"
 
-#: src/App.js:66
-#: src/SignInPage.js:137
+#: src/QRcodePage.js:30
+msgid "Scan this QR code with a 2FA app like Authy or Google Authenticator"
+msgstr "Scan this QR code with a 2FA app like Authy or Google Authenticator"
+
+#: src/App.js:62
+#: src/QRcodePage.js:58
+#: src/SignInPage.js:128
 msgid "Sign In"
 msgstr "Sign In"
 
-#: src/App.js:83
-msgid "Sign Out"
-msgstr "Sign Out"
-
-#: src/SignInPage.js:92
+#: src/SignInPage.js:76
 msgid "Sign in with your username and password."
 msgstr "Sign in with your username and password."
 
-#: src/App.js:48
+#: src/App.js:41
 msgid "Skip to main content"
 msgstr "Skip to main content"
 
@@ -89,7 +89,7 @@ msgstr "Skip to main content"
 msgid "Sorry, the page you were trying to view does not exist."
 msgstr "Sorry, the page you were trying to view does not exist."
 
-#: src/App.js:139
+#: src/App.js:131
 msgid "Terms & conditions"
 msgstr "Terms & conditions"
 
@@ -97,7 +97,7 @@ msgstr "Terms & conditions"
 msgid "This is the full list of domains"
 msgstr "This is the full list of domains"
 
-#: src/App.js:51
+#: src/App.js:44
 msgid "This service is being developed in the open"
 msgstr "This service is being developed in the open"
 
@@ -105,14 +105,18 @@ msgstr "This service is being developed in the open"
 msgid "Track web security compliance"
 msgstr "Track web security compliance"
 
-#: src/UserList.js:132
+#: src/UserCard.js:38
 msgid "TwoFactor"
 msgstr "TwoFactor"
 
-#: src/App.js:87
+#: src/App.js:66
 msgid "User List"
 msgstr "User List"
 
-#: src/QRcodePage.js:43
+#: src/App.js:58
+msgid "User Profile"
+msgstr "User Profile"
+
+#: src/QRcodePage.js:45
 msgid "Your 2FA app will then have a valid code that you can use when you sign in."
 msgstr "Your 2FA app will then have a valid code that you can use when you sign in."
diff --git a/frontend/src/locales/fr.js b/frontend/src/locales/fr.js
index a857ca2932..1bab2ef240 100644
--- a/frontend/src/locales/fr.js
+++ b/frontend/src/locales/fr.js
@@ -1 +1 @@
-/* eslint-disable */module.exports={localeData:{"plurals":function(n,ord){if(ord)return n==1?"one":"other";return n>=0&&n<2?"one":"other"}},messages:{"Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.":"Les Canadiens s'attendent \xE0 ce que le gouvernement du Canada leur offre des services en ligne s\xE9curis\xE9s. Un nouvel avis de politique vise \xE0 assurer que les sites gouvernementaux soient conformes aux bonnes pratiques en mati\xE8re de s\xE9curit\xE9 Web. Voyez comment les sites gouvernementaux deviennent plus s\xE9curitaires.","Create Account":"Cr\xE9er un compte","Domains":"Domaines","Forgot your password?":"Oubli\xE9 votre mot de passe?","Home":"Accueil","Loading...":"Chargement...","Page not found":"Page non trouv\xE9e","Pre-Alpha":"pr\xE9alpha","Privacy":"Confidentialit\xE9","Scan this QR code with a 2FA app like Authy or Google Authenticator":"Scannez ce code QR avec une application 2FA comme Authy ou Google Authenticator","Sign In":"Se connecter","Sign Out":"D\xE9connexion","Sign in with your username and password.":"Connectez-vous avec votre nom d'utilisateur et votre mot de passe.","Skip to main content":"Passer au contenu principal","Sorry, the page you were trying to view does not exist.":"D\xE9sol\xE9, la page que vous essayiez de consulter n'existe pas.","Terms & conditions":"Avis","This is the full list of domains":"Voici la liste compl\xE8te des domaines","This service is being developed in the open":"Ce service est d\xE9velopp\xE9 de fa\xE7on ouverte","Track web security compliance":"Suivre la conformit\xE9 en mati\xE8re de s\xE9curit\xE9 Web","Your 2FA app will then have a valid code that you can use when you sign in.":"Votre application 2FA disposera alors d'un code valide que vous pourrez utiliser lorsque vous vous connecterez."}};
\ No newline at end of file
+/*eslint-disable*/module.exports={messages:{"Admin":"Admin","Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure.":"Les Canadiens s'attendent \xE0 ce que le gouvernement du Canada leur offre des services en ligne s\xE9curis\xE9s. Un nouvel avis de politique vise \xE0 assurer que les sites gouvernementaux soient conformes aux bonnes pratiques en mati\xE8re de s\xE9curit\xE9 Web. Voyez comment les sites gouvernementaux deviennent plus s\xE9curitaires.","Create Account":"Cr\xE9er un compte","Create User":"Create User","DMARC":"DMARC","Domains":"Domaines","Email {0}":["Courriel ",["0"]],"Forgot your password?":"Oubli\xE9 votre mot de passe?","Home":"Accueil","Loading...":"Chargement...","Page not found":"Page non trouv\xE9e","Pre-Alpha":"pr\xE9alpha","Privacy":"Confidentialit\xE9","Scan this QR code with a 2FA app like Authy or Google Authenticator":"Scan this QR code with a 2FA app like Authy or Google Authenticator","Sign In":"Se connecter","Sign in with your username and password.":"Connectez-vous avec votre nom d'utilisateur et votre mot de passe.","Skip to main content":"Passer au contenu principal","Sorry, the page you were trying to view does not exist.":"D\xE9sol\xE9, la page que vous essayiez de consulter n'existe pas.","Terms & conditions":"Avis","This is the full list of domains":"Voici la liste compl\xE8te des domaines","This service is being developed in the open":"Ce service est d\xE9velopp\xE9 de fa\xE7on ouverte","Track web security compliance":"Suivre la conformit\xE9 en mati\xE8re de s\xE9curit\xE9 Web","TwoFactor":"TwoFactor","User List":"User List","User Profile":"User Profile","Your 2FA app will then have a valid code that you can use when you sign in.":"Votre application 2FA disposera alors d'un code valide que vous pourrez utiliser lorsque vous vous connecterez."}};
\ No newline at end of file
diff --git a/frontend/src/locales/fr.po b/frontend/src/locales/fr.po
index b08a1aa8af..41cafd6766 100644
--- a/frontend/src/locales/fr.po
+++ b/frontend/src/locales/fr.po
@@ -13,7 +13,7 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/UserList.js:144
+#: src/UserCard.js:45
 msgid "Admin"
 msgstr ""
 
@@ -21,16 +21,20 @@ msgstr ""
 msgid "Canadians rely on the Government of Canada to provide secure digital services. A new policy notice guides government websites to adopt good web security practices. Track how government sites are becoming more secure."
 msgstr "Les Canadiens s'attendent à ce que le gouvernement du Canada leur offre des services en ligne sécurisés. Un nouvel avis de politique vise à assurer que les sites gouvernementaux soient conformes aux bonnes pratiques en matière de sécurité Web. Voyez comment les sites gouvernementaux deviennent plus sécuritaires."
 
-#: src/SignInPage.js:146
+#: src/SignInPage.js:137
 msgid "Create Account"
 msgstr "Créer un compte"
 
-#: src/UserList.js:88
+#: src/UserList.js:47
 msgid "Create User"
 msgstr ""
 
-#: src/App.js:60
-#: src/DomainsPage.js:24
+#: src/App.js:69
+msgid "DMARC"
+msgstr ""
+
+#: src/App.js:53
+#: src/DomainsPage.js:18
 msgid "Domains"
 msgstr "Domaines"
 
@@ -38,19 +42,16 @@ msgstr "Domaines"
 msgid "Email {0}"
 msgstr "Courriel {0}"
 
-#: src/SignInPage.js:116
+#: src/SignInPage.js:119
 msgid "Forgot your password?"
 msgstr "Oublié votre mot de passe?"
 
-#: src/App.js:57
+#: src/App.js:50
+#: src/QRcodePage.js:67
 msgid "Home"
 msgstr "Accueil"
 
-#: src/UserList.js:154
-msgid "Language: {0}"
-msgstr ""
-
-#: src/QRcodePage.js:19
+#: src/QRcodePage.js:21
 msgid "Loading..."
 msgstr "Chargement..."
 
@@ -58,28 +59,29 @@ msgstr "Chargement..."
 msgid "Page not found"
 msgstr "Page non trouvée"
 
-#: src/App.js:50
+#: src/App.js:43
 msgid "Pre-Alpha"
 msgstr "préalpha"
 
-#: src/App.js:129
+#: src/App.js:121
 msgid "Privacy"
 msgstr "Confidentialité"
 
-#: src/App.js:66
-#: src/SignInPage.js:137
+#: src/QRcodePage.js:30
+msgid "Scan this QR code with a 2FA app like Authy or Google Authenticator"
+msgstr ""
+
+#: src/App.js:62
+#: src/QRcodePage.js:58
+#: src/SignInPage.js:128
 msgid "Sign In"
 msgstr "Se connecter"
 
-#: src/App.js:83
-msgid "Sign Out"
-msgstr "Déconnexion"
-
-#: src/SignInPage.js:92
+#: src/SignInPage.js:76
 msgid "Sign in with your username and password."
 msgstr "Connectez-vous avec votre nom d'utilisateur et votre mot de passe."
 
-#: src/App.js:48
+#: src/App.js:41
 msgid "Skip to main content"
 msgstr "Passer au contenu principal"
 
@@ -87,7 +89,7 @@ msgstr "Passer au contenu principal"
 msgid "Sorry, the page you were trying to view does not exist."
 msgstr "Désolé, la page que vous essayiez de consulter n'existe pas."
 
-#: src/App.js:139
+#: src/App.js:131
 msgid "Terms & conditions"
 msgstr "Avis"
 
@@ -95,7 +97,7 @@ msgstr "Avis"
 msgid "This is the full list of domains"
 msgstr "Voici la liste complète des domaines"
 
-#: src/App.js:51
+#: src/App.js:44
 msgid "This service is being developed in the open"
 msgstr "Ce service est développé de façon ouverte"
 
@@ -103,15 +105,18 @@ msgstr "Ce service est développé de façon ouverte"
 msgid "Track web security compliance"
 msgstr "Suivre la conformité en matière de sécurité Web"
 
-#: src/UserList.js:132
+#: src/UserCard.js:38
 msgid "TwoFactor"
 msgstr ""
 
-#: src/App.js:87
+#: src/App.js:66
 msgid "User List"
 msgstr ""
 
-#: src/QRcodePage.js:43
+#: src/App.js:58
+msgid "User Profile"
+msgstr ""
+
+#: src/QRcodePage.js:45
 msgid "Your 2FA app will then have a valid code that you can use when you sign in."
 msgstr "Votre application 2FA disposera alors d'un code valide que vous pourrez utiliser lorsque vous vous connecterez."
-