时间戳

首页 > 解决方案 > 如何使 Vue i18n 在单元测试中从 .json 文件加载翻译？

typescript - 如何使 Vue i18n 在单元测试中从 .json 文件加载翻译？

问题描述

使用vue-i18n（v8.25.0 和vuev2.6.14），直到现在我的所有翻译都.ts保存在包含 JS 对象的文件中：

import { LocaleMessages } from 'vue-i18n'

const translations: LocaleMessages = {
  en: {
    test: 'Test',
  },
}

export default translations

现在，为了更好地管理翻译，我转而使用.json文件作为翻译对象并在代码中导入这些 json 文件。所以en.json翻译文件只是

{
  "test": "Test"
}

并将其导入.ts文件中

import { LocaleMessages } from 'vue-i18n'
import translation from './en.json'

const translations: LocaleMessages = {
  en: translation,
}

export default translations

当然，我着手 "resolveJsonModule": true,让tsconfig.jsonjson-Import 工作。

这在为应用程序提供服务时有效 - 因此翻译正确加载。但是当使用 执行单元测试时vue-cli-service test:unit，不会加载翻译并且会记录以下警告： [vue-i18n] Cannot translate the value of keypath 'test'. Use the value of keypath as default.

这会导致某些单元测试无法断言存在英文翻译的值。到现在为止，这些测试成功运行，但由于更改为json文件，这不再有效。

我猜，不知何故 jest 没有json正确加载导入。我需要调整什么以使 jestjson在测试运行中也加载翻译文件（“等效于” resolveJsonModule: true）？

标签： typescriptvue.jsunit-testingjestjsvue-i18n

解决方案

通过随机尝试不同的东西，我找到了解决方案。

我完全不明白，但这是使它起作用的原因：

jest.config.js使用带有以下内容的默认值

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
}

使错误出现（单元测试中不提供翻译）。

但是在添加了以下两个之后moduleFileExtensions，它突然又起作用了：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  moduleFileExtensions: [
    'js',
    'ts',
  ],
}

我完全不明白，因为@vue/cli-plugin-unit-jest/presets/typescript-and-babel它本身包括@vue/cli-plugin-unit-jest/presets/typescript定义

moduleFileExtensions: ['ts', 'tsx'],

并由此@vue/cli-plugin-unit-jest/presets/default定义

moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    // tell Jest to handle *.vue files
    'vue'
  ],

（见这里）

但无论出于何种原因，将jsandts moduleFileExtensions显式添加到我自己的文件中，jest.config.js使它json再次处理文件。不过，这对我来说就像一个错误。

推荐阅读