在流星下使用 Mocha/Chai 测试时，Vue $el 未定义答案

【问题标题】：Vue $el is undefined when testing with Mocha/Chai under meteor在流星下使用 Mocha/Chai 测试时，Vue $el 未定义
【发布时间】：2017-07-27 23:12:21
【问题描述】：

我正在为我们的项目开始我们的单元测试环境，但我们可能选择了一个在某些情况下效果不佳的组合。

我们的项目在 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，但我听说流星不喜欢使用 webpack。

有人有什么建议吗？我们是否选择了一个难以使用的组合？

【问题讨论】：

标签： unit-testing meteor vue.js mocha.js chai

【解决方案1】：

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

我遇到了与 Jest 相同的问题。

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

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

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

"testEnvironment": "jsdom"

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

【讨论】：