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

Question

使用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

当然，我设置tsconfig.json中的"resolveJsonModule": true,使json-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导入。有什么我需要调整，使jest也加载json翻译文件在测试运行(和"等效");到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'
],

(见这里)

但无论出于何种原因，将js和tsmoduleFileExtensions显式添加到我自己的jest.config.js中，使其再次处理json文件。但我觉得它像个bug。