Vue3+TS+Jest+testing-library项目运行单元测试报找不到vue-template-compiler错误

根因分析 #

报错是依赖版本不匹配导致：

• @testing-library/vue@5.x 是适配Vue2的版本，内部依赖Vue2专属的vue-template-compiler模板编译工具
• Vue3已经废弃vue-template-compiler，改用@vue/compiler-sfc完成单文件组件编译，老版本的测试库找不到对应依赖就抛出该错误

修复步骤 #

1. 先卸载现有不兼容的测试相关依赖

npm uninstall @testing-library/vue @vue/test-utils vue-jest

如果使用yarn作为包管理器，执行：

yarn remove @testing-library/vue @vue/test-utils vue-jest

2. 安装适配Vue3的对应版本依赖

npm install --save-dev @testing-library/vue@next @vue/test-utils@next vue-jest@next

yarn用户执行：

yarn add --dev @testing-library/vue@next @vue/test-utils@next vue-jest@next

3. （可选）清理缓存重装依赖
   如果执行完上述步骤还是报错，删除本地依赖文件和锁文件后重装：

rm -rf node_modules package-lock.json
# 用yarn的话执行 rm -rf node_modules yarn.lock
npm install

额外修正提示 #

你的测试用例中存在笔误，最后一行断言写为了expect(content).toContain(mockedProps.btn)，应该修改为：

expect(btn).toContain(mockedProps.btn)

否则即使依赖问题解决，测试用例也会执行失败。

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