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

Question

使用 vue-i18n（v8.25.0 和 vue v2.6.14），直到现在我的所有 t运行slations 都在 .ts 包含 JS 对象的文件中:

import { LocaleMessages } from 'vue-i18n'

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

export default translations

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

{
  "test": "Test"
}

并使用

导入到.ts文件中

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

const translations: LocaleMessages = {
  en: translation,
}

export default translations

当然，我设置 "resolveJsonModule": true, 在 tsconfig.json 中使 json-导入工作。

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

这会导致某些断言英文 t运行slated 值存在的单元测试失败。到目前为止，这些测试运行成功，但自从更改为 json 文件后，这不再有效。

我猜，jest 无法正确加载 json 导入。有什么我需要调整的，让 jest 也能在测试运行中加载 json t运行slation 文件（“相当于”resolveJsonModule: true）？

Answer 1

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

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

使用默认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'
  ],

（参见 here）

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

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

How to make Vue i18n load translations from .json file in Unit Test?

unit-testing

typescript

vue.js

jestjs

vue-i18n