在没有Vue CLI的情况下测试普通JavaScript Vue组件

编程问答 2022-08-12

问题描述

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

到目前为止，我在网络上发现的有关子喷气机的文档非常薄：

我安装了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)

enter image description here

请帮助！

解决方法

2个月前，我们遇到了类似的问题。一个稍微不同的用例，但对我们而言，具体取决于对VueCLI的依赖。没有它，我们甚至无法成功运行基本测试。

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

,

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

充分希望它可以为解决您的查询提供一些帮助。

要在不使用Webpack的情况下测试组件，可以使用http-vue-loader插件。

插件工作流程很简单

  1. http请求vue文件
  2. 将vue文件加载到文档片段中
  3. 处理每个部分（模板，脚本和样式）
  4. 将承诺返还给Vue.js（异步组件）
  5. 然后Vue.js编译并缓存组件

实际上，插件的主要目的是快速测试vue组件，而无需任何编译步骤。但是，对于生产而言，我建议将webpack模块捆绑程序与vue-loader一起使用。

Refer to a Example here

componentscomponentsjestjstestingvisual-studio-2017vue-test-utils