Reactjs 使用Typescript和i18next使用Jest测试日期对象

包括一个本地化库，我的组件中有一个日期对象，如下所示：

  getDate = () => {
    const { t } = this.props;
    return new Date().toLocaleString(t('locale.name'), {
      weekday: "long",
      month: "long",
      day: "numeric",
    });
  };

当我尝试运行测试时，我得到错误：

RangeError: Invalid language tag: language.name at Date.toLocaleString ()

  15 |   getDate = () => {
  16 |     const { t } = this.props;
> 17 |     return new Date().toLocaleString(t('language.name'), {
     |                       ^
  18 |       weekday: "long",
  19 |       month: "long",
  20 |       day: "numeric",

所以它不能识别i18n语言环境。这与我嘲笑i18n的方式有关吗

我当前的设置：

react-i18next.ts：

jest.mock('i18next', () => ({
  use: () => {
    return {
      init: () => { }
    };
  },
  t: k => k
}));

My jest.config：

module.exports = {
  verbose: true,
  roots: ["<rootDir>"],
  testRegex: "/__tests__/.*\\.(test|spec)\\.tsx?",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  moduleNameMapper: {
    "react-i18next": "<rootDir>/__tests__/__mock__/react-i18next.ts"
  },
};

---

您模拟t使其返回键本身，因此，

toLocaleString

将language.name作为一种语言，并抛出“Invalid language tag”

我本地化日期格式的方法是使用按区域设置格式化日期的方法

//i18next.config.js
...
{
插值：{
格式：（值、格式、液化天然气）=>{
if（值instanceof Date）{
const cloneDate=新日期（值）；
返回cloneDate.tolocalString（lng，mapFormatToLocale[format]）；
}
返回值；
};
}
}
...
常量mapFormatToLocale={
YYYYmmdd:{
工作日：“长”，
月：“长”，
日期：'数字'，
},
};

//日期定位的用法
t（'MY_DATE'，{DATE:new DATE（）}）；

此方法的酷之处在于，您可以在翻译json文件中定义日期格式样式，这意味着您可以根据需要更改每种语言的日期格式样式

---

此方法在区域设置和日期之间反转DEP，并将与您的模拟一起使用，因为您的模拟将只返回翻译键。

嘿，谢谢！只是出于好奇，我用不同的参数多次调用Date，是否仍然可以使用您的代码？我可以将i18next.config.js中的内容放在i18next.ts中吗？每次将日期对象作为参数传递时，它都会应用格式。2.当然应该与i18next配置一起使用：）谢谢！我正在尝试它现在，我得到的错误，格式不存在这一行。这是tsx吗？返回cloneDate.tolocalString（lng，mapFormatToLocale[format]）；非常感谢。我必须添加一个if语句来检查格式是否也存在！最后一个问题，您知道渲染实际时间的适当方法吗？我运行了我的测试，我期望一个实际日期：期望：“1月1日，星期一”收到：“dateLocale.my_date”，从一开始您就模拟i18next翻译函数以返回键。使用此模拟，您将无法测试翻译功能的结果。您可以测试translation函数是否使用正确的TranslationKey和正确的日期对象调用。

import i18n from "i18next";
import {initReactI18next} from "react-i18next";
import english from "./locales/en/common.json";
import french from "./locales/fr/common.json";

i18n.use(initReactI18next).init({
  lng: 'en',
  resources: {
    fr: {
      translation: french,
    },
    en: {
      translation: english,
    },
  },
  interpolation: {
    escapeValue: false,
  },
  fallbackLng: ["en"]
});

export default i18n;

// locale.en.json 

{
  "MY_DATE": "My Date {{date, YYYYmmdd}}"
}