Vue单元测试中使用含静态资源导入的Mixin出现SyntaxError报错

该报错是Jest的资源转换规则和项目运行环境的构建规则不匹配导致的：

• 本地、生产等环境能正常运行，是因为webpack/vite这类构建工具已经配置了.md、.txt这类非JS静态资源的加载规则（比如用raw-loader把文件内容转为字符串赋值给导入变量），语法本身是合法的。
• Jest默认仅支持解析JS、JSON类型的文件，没有对应配置的情况下，遇到import导入md/txt这类非JS文件时，会直接把目标文件的内容当作JS代码解析，自然就会抛出语法错误，你看到的前缀操作左值非法报错就是解析md文件内容时触发的。

方案1：mock静态资源（推荐，单元测试不需要真实文件内容时使用） #

在Jest配置文件（独立jest.config.js，或Vue CLI项目的vue.config.js的jest字段）中添加静态资源映射规则：

module.exports = {
  // 其他原有配置保留
  moduleNameMapper: {
    // 先匹配@路径别名，和你项目的别名配置对应
    '^@/(.*)$': '<rootDir>/src/$1',
    // 把md、txt类文件映射到mock文件，返回自定义的测试内容
    '\\.(md|txt)$': '<rootDir>/tests/unit/mocks/fileMock.js'
  }
}

新建tests/unit/mocks/fileMock.js文件，写入模拟返回内容：

// 可以按照你的测试需要返回对应的模拟字符串
module.exports = 'mock test file content'

方案2：配置转换规则加载真实文件内容（需要用到真实文件内容时使用） #

先安装raw-loader：

npm install raw-loader --save-dev

在Jest配置中添加transform规则：

module.exports = {
  // 其他原有配置保留
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest',
    // 用raw-loader处理md、txt类文件
    '\\.(md|txt)$': 'raw-loader'
  },
  // 把md、txt加入支持的文件后缀列表
  moduleFileExtensions: ['js', 'vue', 'json', 'md', 'txt']
}

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