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

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

到目前为止，我在Web上找到的关于主题的文档非常少：

我安装了Vue、Vue测试utils和JSDOM

My 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)

---

请帮忙

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

---

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

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

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

要在没有网页包的情况下测试组件，可以使用插件

插件工作流很简单

http请求vue文件

在文档片段中加载vue文件

处理每个部分（模板、脚本和样式）

向Vue.js（异步组件）返回承诺

然后Vue.js编译并缓存该组件

实际上，插件的主要目的是快速测试

vue

组件，而无需任何编译步骤。但是，对于生产，我建议使用带有vue加载程序的webpack模块绑定器

---

我希望这能对您有所帮助<代码>弃用通知：在存根组件时，不再支持提供字符串（ComponentToStub:'）。谢谢你，迪利普。我将进一步研究API

TypeError:removeEventListener处的非法调用

此错误代码显示您正在尝试删除不存在的事件侦听器。请详细检查您的代码。我可以问您为什么不想使用VUE cli吗？谢谢您的提问。基本上，不选择使用Vue Cli背后的想法是，我们所有的组件都是在没有任何构建步骤的情况下编写的非普通javascript。我们希望添加单元测试，以便在不中断6名开发人员团队的开发工作流程的情况下发布代码。现在，也许使用Vue Cli的开销是值得的，但我们希望首先权衡我们的选项。谢谢。测试部分呢？您能否提供一个使用vue test utils和Jest测试非普通javascript（而不是.vue文件）编写的组件的示例？谢谢您的评论。我不得不同意你的看法。vue Cli提供了很多现成的功能。也许这些开销是值得的。