Vue $el在流星下用摩卡/柴进行测试时未定义

Question

我正在为我们的项目启动我们的单元测试环境，但我们可能已经选择了一个在几种情况下效果不佳的组合。

我们的项目在 Meteor 下运行，UI 的代码是用 Vue 和 Coffeescript 编写的。我们尝试使用的测试环境是Mocha & Chai。当我运行测试套件时，命令如下所示：

meteor test --once --driver-package=dispatch:mocha

从互联网上的示例来看，以下代码应该有效：

const VueObject = Vue.extend(MyVueComponent);
const VueInstance = new VueObject().$mount();
chai.assert.ok(VueInstance.$el.textContent);

从那时起，我可以为我的测试提出$el各种各样的问题，但$el是不确定的。我什至尝试使用Vue.nextTick()等待，但它仍然未定义。在我找到的例子中，他们经常谈论使用 webpack，但我听说 meteor 不喜欢使用 webpack。

有人有什么建议吗？我们是否选择了一个硬组合来合作？

Answer 1

TL;DR：确保在浏览器中运行测试。如果这不起作用，请尝试在创建 Vue 应用程序时手动添加元素。

我在开玩笑时也面临着同样的问题。

最初，我认为在测试应用程序时必须手动创建元素，所以我做了：

test("do things", () => {
const vm = new Vue({
el: document.createElement("div"),
render(h) {
return h(Hello);
}
});
expect(vm.$el.textContent).toBe("heyo");
});

但后来documentundefined.这让我发现我应该使用domjs而不是node来运行我的测试

"testEnvironment": "jsdom"

有了这个变化，我什至摆脱了el，它仍然像一个魅力。