使用'next-i18next'和jest进行NextJS本地化不会在Jest中输出本地化的文本

问题描述

我正在使用next-i18next在NextJS 9.5版上本地化我的应用程序。

设法在开发服务器上启动并运行它，但是我无法通过基本测试来通过Jest。

我的标题组件：

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

interface HeaderProps {
    t: TFunction;
}

const Header: React.FC<HeaderProps> = ({ t }): JSX.Element => {
    return (
        <>
            <h1>
                {t('h1')}
            </h1>
        </>
    );
};

Header.getinitialProps = async () => ({
    namespacesrequired: ['common'],});

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

这是规格文件：

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

jest.mock('react-i18next',() => ({
    // this mock makes sure any components using the translate HoC receive the t function as a prop
    withTranslation: () => Component => {
      Component.defaultProps = { ...Component.defaultProps,t: () => "" };
      return Component;
    }
  }));

describe('<Header/>',() => {

    test('it should render',() => {
        render(<Header />);
        screen.debug();
        expect(screen.getByRole('heading')).toHaveTextContent(/Text Mining/i);
    });
    
});

今天花了我大部分时间，screen.debug()的输出确认没有翻译或后备文本，只有空白的<h1 />应该是<h1>My app!</h1>。 / p>

我从withTranslation模仿了必需的react-i18next方法，但不确定测试为什么失败。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）