Vue Cli 3 + Jest 环境下如何运行单个单元测试？

嘿，我刚好在Vue CLI3搭配Jest的项目里折腾过这个需求，给你分享两种最实用的方式，不管是用命令行还是VS Code插件都能轻松搞定：

一、命令行方式（无需额外工具） #

Vue CLI3的vue-cli-service test:unit本质是封装了Jest命令，所以我们可以通过传递Jest的参数来指定运行单个测试用例，注意要在npm命令后加--来把参数传给Jest：

• 运行单个测试文件
  直接指定测试文件的路径即可，比如：

  npm run test:unit -- tests/unit/login.spec.js
  

  路径可以是相对项目根目录的相对路径，也可以用绝对路径。

• 运行单个测试用例（通过测试名称匹配）
  如果只想跑某个具体的测试用例（比如test('用户登录成功', () => { ... })），可以用-t参数匹配测试名称：

  npm run test:unit -- -t "用户登录成功"
  

  名称支持模糊匹配，比如-t "登录"会运行所有名称包含“登录”的测试用例。

• 精准匹配：指定文件+测试名称
  结合上面两种方式，能精准定位到某文件里的单个用例：

  npm run test:unit -- tests/unit/login.spec.js -t "用户登录成功"
  

小技巧：简化命令 #

可以在package.json里新增一个快捷脚本，省去每次输入--的麻烦：

{
  "scripts": {
    "test:unit": "vue-cli-service test:unit",
    "test:single": "vue-cli-service test:unit --"
  }
}

之后运行单个文件就可以写成：

npm run test:single tests/unit/login.spec.js

二、VS Code插件方式（更高效） #

如果平时用VS Code开发，推荐用插件来可视化管理和运行测试用例，效率更高：

• Jest插件
  直接在VS Code扩展市场搜「Jest」安装即可。安装后，每个测试用例（test/it语句）旁边会出现一个「运行」按钮，点击就能单独运行这个用例，结果直接显示在VS Code的输出面板里，还支持一键调试测试用例（需要配置VS Code的调试环境）。

• Vue Test Explorer
  这个是专门针对Vue项目的测试管理插件，集成了Jest支持。安装后可以在VS Code侧边栏看到所有测试用例的树形结构，点击单个用例就能运行，还能批量选择运行，非常适合管理大量测试用例的项目。

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