时间戳

首页 > 解决方案 > 使用 next-translate 和 i18n 测试组件

reactjs - 使用 next-translate 和 i18n 测试组件

问题描述

在我们的 Next.js 应用程序中，我们使用vinissimus/next-translate包进行翻译。我们进行了相应的设置：

next.config.js：

const nextTranslate = require('next-translate')
module.exports = nextTranslate()

i18n.js 配置文件：

{
  "locales": ["en"],
  "defaultLocale": "en",
  "pages": {
    "*": ["en"],
    "/": ["en"],
  }
}

通过useTranslation钩子在组件内部使用它：

const App = () => {
  const { t, lang } = useTranslation();

  return (
    <Homepage>
          <span>{t(`${lang}:homepage.title.header`)}</span>
    </Homepage>

我的问题是如何用 react-testing-library 开玩笑地测试它？

当我在测试中渲染我的组件时，翻译不起作用，只返回键。另外，我想通过getByText / findByText测试它并通过：

{t(`${lang}:homepage.header`)}

如果我没有在应用程序中使用任何i18nProvider而只使用这个i18n.js配置，我该如何设置某种包装器或配置来进行测试？

标签： reactjsjestjsnext.jsinternationalizationreact-testing-library

解决方案

这是一个示例包装器：

// tests/wrapper.js
import { render } from '@testing-library/react'
import I18nProvider from 'next-translate/I18nProvider'

import commonEN from '../locales/en/common.json'

const Providers = ({ children }) => (
  <I18nProvider
    lang={'en'}
    namespaces={{
      common: commonEN
    }}
  >
    {children}
  </I18nProvider>
)

const customRender = (ui, options = {}) => render(ui, { wrapper: Providers, ...options })

export * from '@testing-library/react'

export { customRender as render }

测试看起来像

// App.spec.js
import React from 'react'
import { render } from './tests/wrapper'
import App from './App'

jest.mock('next/router', () => ({
  useRouter() {
    return {
      asPath: '/'
    }
  }
}))

describe('App', () => {
  it('should render the app', async () => {
    const res = render(<App />)
  })
})

推荐阅读