next-i18next单元测试错误“无法读取未定义的属性语言”，带有链接和笑话

如何解决next-i18next单元测试错误“无法读取未定义的属性语言”，带有链接和笑话

next-i18next使用它自己的Link组件来与语言环境子路径兼容。

https://github.com/isaachinman/next-i18next

尝试简单的快照测试时，出现错误Cannot read property language of undefined。

我的组件

import React from 'react';
import { TFunction } from 'next-i18next';
import { withTranslation,Link } from '../../../i18n';

interface HeaderProps {
  readonly t: TFunction;
}

const Header = ({ t }: HeaderProps): JSX.Element => {
  return (
    <>
      <Flex>
        <Box>
          <Link href="/">{t('home')}</Link>
        </Box>
      </Flex>
    </>
  );
};

export default withTranslation('common')(Header);

这是快照测试：

import React from 'react';
import { render,screen } from '@testing-library/react';
import Header from './Header';

describe('<Header/>',() => {
  test('it should render correctly',() => {
    const { container } = render(<Header />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

测试在没有Link组件的情况下运行和通过。

我对i18n.ts的定义如下：

import path from 'path';
import NextI18Next from 'next-i18next';
import { publicRuntimeConfig } from './next.config';

const { localeSubpaths } = publicRuntimeConfig;

export const nextI18next = new NextI18Next({
  browserLanguageDetection: false,defaultNS: 'common',defaultLanguage: 'en',fallbackLng: 'en',otherLanguages: ['fr'],localeSubpaths,localePath: path.resolve('./public/static/locales'),});

export const {
  i18n,appWithTranslation,Link,withTranslation,Router,} = nextI18next;

反正我可以解决这个错误吗？

解决方法

您应该使用i18nextProvider包装正在测试的组件。

选中Stubbing I18next useTranslation hook in Jest doesn't trigger toHaveBeenCalled

修改 I18next具有一种“特殊”语言（cimode），它使t函数始终返回给定的键，这样，在测试中，您可以断言该键而不是值（可以更改，有时可以更改该值）不是由开发人员提供的。