fix(i18n): globally mocks translation function

jest.config.js

@@ -12,6 +12,8 @@ module.exports = {
   moduleNameMapper: {
     "^luxon$": "<rootDir>/node_modules/luxon",
     "^react$": "<rootDir>/node_modules/react",
+    "react-i18next": "<rootDir>/src/DevTools/mockReactI18n",
+    // i18next: "<rootDir>/src/DevTools/mockI18n",
   },
   reporters: ["default", "jest-junit"],
   setupFilesAfterEnv: ["<rootDir>/src/tests.ts"],

src/Apps/Artist/Routes/CV/Components/ArtistCVGroup.tsx

@@ -10,7 +10,6 @@ import {
 } from "react-relay"
 import { useState, Fragment, FC } from "react"
 import { useTranslation } from "react-i18next"
-import "System/i18n/i18n"
 
 const REFETCH_PAGE_SIZE = 10
 

src/Apps/Artwork/Components/ArtworkSidebar2/__tests__/ArtworkSidebar2ArtsyGuarantee.jest.tsx

@@ -1,6 +1,5 @@
-import { screen } from "@testing-library/react"
-import { ArtworkSidebar2ArtsyGuarantee } from "../ArtworkSidebar2ArtsyGuarantee"
-import { render } from "DevTools/setupTestWrapper"
+import { render, screen } from "@testing-library/react"
+import { ArtworkSidebar2ArtsyGuarantee } from "Apps/Artwork/Components/ArtworkSidebar2/ArtworkSidebar2ArtsyGuarantee"
 
 describe("ArtworkSidebar2ArtsyGuarantee", () => {
   it("renders the Artsy Guarantee section", async () => {

src/Apps/Settings/Routes/Insights/Components/__tests__/InsightsHeader.jest.tsx

@@ -1,6 +1,5 @@
-import { screen } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import { MockBoot } from "DevTools"
-import { render } from "DevTools/setupTestWrapper"
 import { useSystemContext } from "System"
 import { Breakpoint } from "Utils/Responsive"
 import { InsightsHeader } from "Apps/Settings/Routes/Insights/Components/InsightsHeader"

src/Components/NavBar/__tests__/NavBar.jest.tsx

@@ -2,11 +2,9 @@ import { BellIcon, EnvelopeIcon, SoloIcon } from "@artsy/palette"
 import { SystemContextProvider } from "System"
 import { useTracking } from "react-tracking"
 import { mount } from "enzyme"
-import { NavBar } from "../NavBar"
-import { NavBarMobileMenuInboxNotificationCount } from "../NavBarMobileMenu/NavBarMobileMenuInboxNotificationCount"
+import { NavBar } from "Components/NavBar/NavBar"
+import { NavBarMobileMenuInboxNotificationCount } from "Components/NavBar/NavBarMobileMenu/NavBarMobileMenuInboxNotificationCount"
 import { mediator } from "Server/mediator"
-import { I18nextProvider } from "react-i18next"
-import i18n from "System/i18n/i18n"
 
 jest.mock("Components/Search/SearchBar", () => {
   return {
@@ -37,9 +35,7 @@ describe("NavBar", () => {
   const getWrapper = ({ user = null, isEigen = false } = {}) => {
     return mount(
       <SystemContextProvider user={user} isEigen={isEigen}>
-        <I18nextProvider i18n={i18n}>
-          <NavBar />
-        </I18nextProvider>
+        <NavBar />
       </SystemContextProvider>
     )
   }

src/Components/Notifications/__tests__/MarkAllAsReadPanel.jest.tsx

@@ -1,5 +1,4 @@
-import { screen } from "@testing-library/react"
-import { render } from "DevTools/setupTestWrapper"
+import { render, screen } from "@testing-library/react"
 import { Notifications } from "Components/Notifications/Notifications"
 
 jest.mock("Utils/Hooks/useMatchMedia", () => ({

src/Components/Notifications/__tests__/Notifications.jest.tsx

@@ -1,5 +1,4 @@
-import { screen } from "@testing-library/react"
-import { render } from "DevTools/setupTestWrapper"
+import { render, screen } from "@testing-library/react"
 import { Notifications } from "Components/Notifications/Notifications"
 
 jest.mock("Utils/Hooks/useMatchMedia", () => ({

src/DevTools/mockI18n.ts

@@ -0,0 +1,7 @@
+export default {
+  use: () => {
+    return {
+      init: () => {},
+    }
+  },
+}

src/DevTools/mockReactI18n.tsx

@@ -0,0 +1,15 @@
+import i18n from "i18next"
+import config from "System/i18n/config"
+
+i18n.init(config)
+
+export const useTranslation = () => {
+  return {
+    t: i18n.t,
+  }
+}
+
+export const initReactI18next = {
+  type: "3rdParty",
+  init: () => {},
+}

src/DevTools/setupTestWrapper.tsx

@@ -1,7 +1,6 @@
-import { render as rtlRender, RenderResult } from "@testing-library/react"
-import { mount as enzMount } from "enzyme"
+import { render, RenderResult } from "@testing-library/react"
+import { mount } from "enzyme"
 import * as React from "react"
-import { I18nextProvider } from "react-i18next"
 import { QueryRenderer } from "react-relay"
 import { GraphQLTaggedNode, OperationType } from "relay-runtime"
 import {
@@ -10,15 +9,6 @@ import {
   MockEnvironment,
 } from "relay-test-utils"
 import { MockResolvers } from "relay-test-utils/lib/RelayMockPayloadGenerator"
-import i18n from "System/i18n/i18n"
-
-// overide mount to provide access to i18n inside the setupTestWrapper function
-const mount = children =>
-  enzMount(<I18nextProvider i18n={i18n}>{children}</I18nextProvider>)
-
-// overide render to provide access to i18n inside the setupTestWrapperTL function
-export const render = children =>
-  rtlRender(<I18nextProvider i18n={i18n}>{children}</I18nextProvider>)
 
 type SetupTestWrapper<T extends OperationType> = {
   Component: React.ComponentType<T["response"]>

src/System/i18n/config.ts

@@ -0,0 +1,24 @@
+import { getENV } from "Utils/getENV"
+
+// TODO: Serve static assets on the server-side
+const translations = require("System/i18n/locales/en-US/translation.json")
+
+export default {
+  debug: getENV("ENABLE_I18N_DEBUG") === "true",
+  resources: {
+    ["en-US"]: {
+      translation: translations,
+    },
+  },
+  detection: {
+    order: ["querystring"],
+    lookupQuerystring: "locale",
+  },
+  supportedLngs: ["en-US"],
+  fallbackLng: "en-US",
+  defaultNS: "translation",
+  fallbackNS: "translation",
+  interpolation: {
+    escapeValue: false,
+  },
+}

src/System/i18n/i18n.ts

@@ -1,28 +1,7 @@
 import i18n from "i18next"
 import { initReactI18next } from "react-i18next"
-import { getENV } from "Utils/getENV"
+import config from "System/i18n/config"
 
-// TODO: Serve static assets on the server-side
-const translations = require("System/i18n/locales/en-US/translation.json")
-
-i18n.use(initReactI18next).init({
-  debug: getENV("ENABLE_I18N_DEBUG") === "true",
-  resources: {
-    ["en-US"]: {
-      translation: translations,
-    },
-  },
-  detection: {
-    order: ["querystring"],
-    lookupQuerystring: "locale",
-  },
-  supportedLngs: ["en-US"],
-  fallbackLng: "en-US",
-  defaultNS: "translation",
-  fallbackNS: "translation",
-  interpolation: {
-    escapeValue: false,
-  },
-})
+i18n.use(initReactI18next).init(config)
 
 export default i18n