相关疑难解决方法(0)

我正在尝试在我的 Gatsby 项目中设置 i18n。

我一直在逐步遵循本教程：

https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/

首先我下载所需的包：

npm i -S i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next

然后我设置了 i18n 组件

import i18n from "i18next"
import Backend from "i18next-xhr-backend"
import LanguageDetector from "i18next-browser-languagedetector"
import { reactI18nextModule } from "react-i18next"

i18n
.use(Backend)
.use(LanguageDetector)
.use(reactI18nextModule)
.init({
    fallbackLng: "en",

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    debug: true,

    interpolation: {
    escapeValue: false, // not needed for react!!
    },

    react: {
    wait: true,
    },
})

export default i18n

将其导入到我的布局组件中：

import React …

这是我的函数和测试的简化版本。虽然我嘲笑了 useTranslation 我收到以下错误：

您正在传递一个未定义的模块！请检查您传递给 i18next.use() 的对象

   7 | i18n
   8 |   .use(Backend)
>  9 |   .use(initReactI18next)

Run Code Online (Sandbox Code Playgroud)

我如何正确模拟以消除此错误？

import React from 'react'
import { useTranslation } from 'react-i18next'
import * as Constants from 'constants'
import MyComponent from 'components'

const Dashboard = () => {
  const { t } = useTranslation('dashboard')
  return (
     <div> Dashboard 
      <MyComponent name={t(Constants.MYCOMPONENT)}/>
    </div>
  )
}

export default Dashboard

jest.mock('react-i18next', () => ({
  useTranslation: () => ({ t: (key) => key })
}))
it('Render Dashboard without crash', () …