在没有 Vue CLI 的情况下测试纯 javascript Vue 组件答案

【问题标题】：Testing plain javascript Vue components without Vue CLI在没有 Vue CLI 的情况下测试纯 javascript Vue 组件
【发布时间】：2020-12-25 07:59:06
【问题描述】：

是否可以在没有 Vue CLI/Webpack/Babel 设置的情况下测试使用纯 javascript 开发的 Vue 组件？

到目前为止，我在网上找到的关于 subjet 的文档非常少：

我安装了 Vue，Vue 测试工具，JSDOM

我的 package.json ：

{
  "name": "GuichetUnique.CMS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jest": "^26.4.2",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.5",
    "jsdom": "16.4.0",
    "jsdom-global": "3.0.2"
  },
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Jest 使用简单的 js 函数运行良好，但我没有设法测试 Vue 组件。

我的测试内容

require('jsdom-global')();
var testUtils = require('@vue/test-utils'), Vue = require('vue');

testUtils.mount({ template: '<div>test</div>' });

测试结果

TypeError: Illegal invocation at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)

请帮忙！

【问题讨论】：

希望对您有所帮助。 Deprecation Notice: When stubbing components, supplying a string (ComponentToStub: '<div class="stubbed" />) is no longer supported.Link
谢谢迪利普。我将进一步探索 API
TypeError: Illegal invocation at removeEventListener 此错误代码表明您正在尝试删除不存在的事件侦听器。请仔细检查您的代码。
请问您为什么不想使用 VUE-cli？
感谢您的提问 Eliezer。基本上，不选择使用 Vue-Cli 背后的想法是我们所有的组件都已经用纯 JavaScript 编写，没有任何构建步骤。我们希望添加单元测试来放置代码，而不会干扰 6 名开发人员团队的开发工作流程。现在也许使用 Vue-Cli 的开销是值得的，但我们想先权衡我们的选择。

标签： testing visual-studio-2017 jestjs components vue-test-utils

【解决方案1】：

我们在 2 个月前遇到过类似的问题。一个稍微不同的用例，但对我们来说，对 VueCLI 的依赖是罪魁祸首。没有它，我们甚至无法成功运行基本测试。

我认为如果你想走这条路，你可能需要做很多工作绕过预期的机制。为此，您需要自己回答是否值得您花时间。我们选择了 VueCLI，并认为开销是理所当然的。

【讨论】：

感谢您对臭氧的评论。我不得不赞同你。 vue-Cli 提供了很多开箱即用的功能。也许开销是值得的。

【解决方案2】：

我在一年前尝试过这个，我遇到了类似的情况，我不想使用 CLI/webpack。

完全希望它可以为解决您的问题做出一些贡献。

要在没有 webpack 的情况下测试您的组件，您可以使用 http-vue-loader 插件。

插件工作流程很简单

http请求vue文件
在文档片段中加载 vue 文件
处理每个部分（模板、脚本和样式）
向 Vue.js（异步组件）返回一个承诺
然后 Vue.js 编译并缓存组件

其实plugin的主要目的是快速测试vue组件，无需任何编译步骤。但是，对于生产环境，我建议使用带有 vue-loader 的 webpack 模块捆绑器。

Refer to a Example here

【讨论】：

感谢萨达姆。测试部分呢？您能否提供一个使用 vue test utils 和 Jest 测试非纯 javascript（不是 .vue 文件）编写的组件的示例？