如何将带有 Jest 的 Vue Test Utils 添加到现有的 Vue-CLI 3 项目中？

Posted 2023-02-22

【中文标题】如何将带有 Jest 的 Vue Test Utils 添加到现有的 Vue-CLI 3 项目中？

【英文标题】：How to add Vue Test Utils with Jest to already existing Vue-CLI 3 project?

【发布时间】：2019-09-18 17:19:09

【问题描述】：

我想测试一个已经存在的 Vue-CLI 3 项目。创建项目时，我还没有初始化测试预设。我已经搜索过，但没有找到任何合适的结果。我也阅读了文档，但它说在创建项目时添加测试。

【参考方案1】：

在您的项目根目录中，输入以下命令添加@vue/test-utils and jest：

vue add unit-jest

命令输出应如下所示：

$ vue add unit-jest

?  Installing @vue/cli-plugin-unit-jest...

+ @vue/cli-plugin-unit-jest@3.7.0
added 282 packages from 167 contributors, removed 2 packages and audited 42205 packages in 9.693s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: @vue/cli-plugin-unit-jest


?  Invoking generator for @vue/cli-plugin-unit-jest...
?  Installing additional dependencies...

added 12 packages from 11 contributors, updated 1 package, moved 4 packages and audited 42427 packages in 7.895s
found 64 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully invoked generator for plugin: @vue/cli-plugin-unit-jest
   The following files have been updated / added:

     jest.config.js
     tests/unit/.eslintrc.js
     tests/unit/example.spec.js
     package-lock.json
     package.json

   You should review these changes with git diff and commit them.

【参考方案2】：

我成功使用了以下插件：

@vue/cli-plugin-unit-jest ([https://www.npmjs.com/package/@vue/cli-plugin-unit-jest)

我使用以下命令从根文件夹安装了它：

vue add unit-jest

该命令已经在我的 package.json 文件中添加了一个条目：

"scripts": 
    ...
    "test:unit": "vue-cli-service test:unit",
    ...
,