如何在Vue单元测试中让vue-i18n加载.json格式的翻译文件

该问题本质是jest环境下json默认导入行为和生产环境不一致，导入的json内容被包裹在default属性下，导致vue-i18n无法读取到正确的翻译key。可按以下步骤调整配置解决：

步骤1：校验ts-jest配置（优先尝试） #

如果你的项目使用ts-jest处理TypeScript文件，可在jest配置文件（jest.config.js、vue.config.js的jest字段或package.json的jest字段）中添加以下配置，确保jest侧的json导入行为和tsconfig配置对齐：

module.exports = {
  // 其他原有配置
  globals: {
    'ts-jest': {
      tsconfig: {
        // 和tsconfig.json配置保持一致
        resolveJsonModule: true,
        esModuleInterop: true
      }
    }
  },
  // 确保json在模块扩展名列表里
  moduleFileExtensions: [
    "js",
    "json",
    "jsx",
    "ts",
    "tsx",
    "vue"
    // 其他原有扩展名
  ]
}

步骤2：排查moduleNameMapper冲突 #

检查jest配置中的moduleNameMapper字段，是否存在把json文件匹配到静态资源mock的规则，例如：

// 错误示例：会把所有json文件导入为mock的静态资源对象
moduleNameMapper: {
  '\\.(css|less|json)$': '<rootDir>/test/mocks/fileMock.js'
}

如果有这类规则，把json从匹配规则中移除即可。

步骤3：配置json专用transform（备选方案） #

如果上述配置无效，可安装jest-transform-stub专门处理json文件导入：

1. 安装依赖：

npm install jest-transform-stub --save-dev

2. 修改jest配置的transform字段：

module.exports = {
  // 其他原有配置
  transform: {
    '^.+\\.json$': 'jest-transform-stub',
    // 保留原有其他transform规则，比如vue、ts、js的处理规则
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
  }
}

调整完成后重新运行单元测试，即可正常加载json格式的翻译文件。

内容的提问来源于stack exchange，提问作者sceee