Vue 3 CLI项目jest测试中toMatchInlineSnapshot无法运行报错

解决方案 #

按以下步骤排查修复即可：

• 检查快照序列化器配置
  Vue组件快照需要专用序列化器才能正确生成，先安装依赖：

  # Vue2 项目
  npm install jest-serializer-vue --save-dev
  # Vue3 项目
  npm install jest-serializer-vue@next --save-dev
  

  然后在jest配置文件中添加序列化器声明：

  // jest.config.js 或 jest.config.ts
  module.exports = {
    // 其余配置保留
    snapshotSerializers: ['jest-serializer-vue']
  }
  

• 修复依赖版本兼容问题

  1. Jest 28及以上版本不再内置prettier和jsdom环境，需要手动安装：

     npm install prettier jest-environment-jsdom --save-dev
     

  2. 确保核心依赖版本匹配：Vue版本对应vue-jest版本、jest版本对应ts-jest版本，避免跨大版本混用导致解析失败。

• 修正TypeScript相关配置

  1. 确认jest的transform配置可以正确解析vue和ts文件：

     module.exports = {
       moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
       transform: {
         '^.+\\.vue$': 'vue-jest',
         '^.+\\.tsx?$': 'ts-jest'
       },
       testEnvironment: 'jsdom'
     }
     

  2. 如果存在toMatchInlineSnapshot不存在的类型报错，安装@types/jest依赖，并在tsconfig.json的compilerOptions.types数组中加入jest。

• 重新生成快照
  删除测试文件中toMatchInlineSnapshot方法内已有的错误快照内容，执行以下命令更新快照：

  npx jest -u
  

  Jest会自动将正确的快照内容写入测试文件的方法参数中。

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