next-i18next 使用 Link 和 jest 进行单元测试错误“无法读取未定义的属性语言”

next-i18next使用它自己的Link组件与区域设置子路径兼容。

https://github.com/isaachinman/next-i18next 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 包装您的测试组件。

Check Jest 中的存根 I18next useTranslation 挂钩不会触发 toHaveBeenCalled https://stackoverflow.com/questions/64036604/stubbing-i18next-usetranslation-hook-in-jest-doesnt-trigger-tohavebeencalled/64068566#64068566

EditI18next 有一种“特殊”语言（cimode）这使得t函数总是返回给定的键，这样在测试中您可以对键而不是值进行断言（可以更改，有时开发人员不能更改）。