Replace the mock of react-i18next with a configured i18next provider

frontend/src/test-utils.tsx

-import React from 'react'
-import { render } from '@testing-library/react'
 import { ThemeProvider } from '@mui/material/styles'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { I18nextProvider, initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
 
 import { defaultTheme } from 'themes'
 
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  fallbackLng: 'en',
+
+  ns: ['translationsNS'],
+  defaultNS: 'translationsNS',
+
+  debug: false,
+
+  interpolation: {
+    escapeValue: false,
+  },
+
+  resources: { en: { translationsNS: {} } },
+})
+
 // Providers used in test rendering
 const AllTheProviders = ({ children }: any) => (
-  <ThemeProvider theme={defaultTheme}> {children} </ThemeProvider>
+  <I18nextProvider i18n={i18n}>
+    <ThemeProvider theme={defaultTheme}> {children} </ThemeProvider>
+  </I18nextProvider>
 )
 
 // Custom testing-library/react renderer using our providers.
@@ -18,72 +38,3 @@ export * from '@testing-library/react'
 
 // override render method
 export { customRender as render }
-
-// The reason for this complex mock of react-i18next is to make the Trans-component work when running tests
-jest.mock('react-i18next', (): object => {
-  // Need to require React at this level as well to avoid getting an error
-  // when running the tests saying that the module factory is not allowed
-  // to reference out-of-scope variables
-  // eslint-disable-next-line @typescript-eslint/no-shadow,global-require
-  const React = require('react')
-
-  const hasChildren = (node: any): boolean =>
-    node && (node.children || (node.props && node.props.children))
-
-  const getChildrenFromProps = (node: any): any =>
-    node.props && node.props.children ? node.props.children : null
-
-  const getChildren = (node: any): any =>
-    node && node.children ? node.children : getChildrenFromProps(node)
-
-  const renderNodes = (reactNodes: any): any => {
-    if (typeof reactNodes === 'string') {
-      return reactNodes
-    }
-
-    return Object.keys(reactNodes).map((key, i) => {
-      const child = reactNodes[key]
-
-      if (typeof child === 'string') {
-        return child
-      }
-
-      if (hasChildren(child)) {
-        const inner = renderNodes(getChildren(child))
-        // eslint-disable-next-line react/no-array-index-key
-        return React.cloneElement(child, { ...child.props, key: i }, inner)
-      }
-
-      const isElement = React.isValidElement(child)
-      if (typeof child === 'object' && !isElement) {
-        return Object.keys(child).reduce(
-          (str, childKey) => `${str}${child[childKey]}`,
-          ''
-        )
-      }
-
-      return child
-    })
-  }
-
-  const useMock: any = [(k: any) => k, {}]
-  // Mock react-i18next module to return a translation that just returns the key
-  useMock.t = (k: any) => k
-  useMock.i18n = {
-    // Return "en" as the selected language if the code asks for it
-    language: 'en',
-    changeLanguage: () => new Promise(() => {}),
-  }
-
-  return {
-    withTranslation:
-      () =>
-      (Component: any): any =>
-      (props: any): any =>
-        <Component t={(k: any): any => k} {...props} />,
-    Trans: ({ children }: any) => renderNodes(children),
-    Translation: ({ children }: any) =>
-      children((k: any): any => k, { i18n: {} }),
-    useTranslation: () => useMock,
-  }
-})