不使用 Vue CLI 测试普通 javascript Vue 组件

Question

是否可以在没有 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)

请帮忙！

Answer 1

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

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

Answer 2

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

希望它能为解决您的问题做出贡献。

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

插件工作流程简单

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

实际上插件的主要目的是快速测试 vue 组件而无需任何编译步骤。但是，对于生产环境，我建议使用带有 vue-loader.

的 webpack 模块捆绑器

Refer to a Example here

不使用 Vue CLI 测试普通 javascript Vue 组件

Testing plain javascript Vue components without Vue CLI

testing

components

jestjs

visual-studio-2017

vue-test-utils