[#38] Fix i18n config mock for tests

src/i18n.ts

@@ -6,25 +6,25 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 
 export const supportedLanguages = ['en', 'fr'];
 
-i18n
-  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
-  // learn more: https://github.com/i18next/i18next-http-backend
-  .use(Backend)
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next)
-  // init i18next
-  // for all options read: https://www.i18next.com/overview/configuration-options
-  .init({
-    fallbackLng: 'en',
-    debug: false,
-    supportedLngs: supportedLanguages,
+export const configureI18n = () => {
+  i18n
+    // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
+    // learn more: https://github.com/i18next/i18next-http-backend
+    .use(Backend)
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // pass the i18n instance to react-i18next.
+    .use(initReactI18next)
+    // init i18next
+    // for all options read: https://www.i18next.com/overview/configuration-options
+    .init({
+      fallbackLng: 'en',
+      debug: false,
+      supportedLngs: supportedLanguages,
 
-    interpolation: {
-      escapeValue: false // not needed for react as it escapes by default
-    }
-  });
-
-export default i18n;
+      interpolation: {
+        escapeValue: false // not needed for react as it escapes by default
+      }
+    });
+};

src/index.tsx

@@ -4,7 +4,9 @@ import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-import './i18n';
+import {configureI18n} from './i18n';
+
+configureI18n();
 
 ReactDOM.render(
   <React.StrictMode>

src/tests/components/LanguageSwitch/__snapshots__/index.test.tsx.snap

@@ -11,7 +11,6 @@ Object {
         <li>
           <a
             class="language-switch__link "
-            data-test-id="language-switch-link-en"
             href="#en"
           >
             language_switch.en
@@ -20,7 +19,6 @@ Object {
         <li>
           <a
             class="language-switch__link "
-            data-test-id="language-switch-link-fr"
             href="#fr"
           >
             language_switch.fr
@@ -36,7 +34,6 @@ Object {
       <li>
         <a
           class="language-switch__link "
-          data-test-id="language-switch-link-en"
           href="#en"
         >
           language_switch.en
@@ -45,7 +42,6 @@ Object {
       <li>
         <a
           class="language-switch__link "
-          data-test-id="language-switch-link-fr"
           href="#fr"
         >
           language_switch.fr

src/tests/index.test.tsx

@@ -8,7 +8,7 @@ import App from '@src/App';
 jest.mock('react-dom', () => ({ render: jest.fn() }));
 
 // mock i18n import as we do not need translations setup for this test
-jest.mock('@src/i18n', () => ({}));
+jest.mock('@src/i18n', () => ({ configureI18n: jest.fn() }));
 
 test('renders with App and root div', () => {
   // Create and append to document body