从节点使用 mocha js 中的全局窗口变量答案

【问题标题】：Working with global window variable in mocha js from node从节点使用 mocha js 中的全局窗口变量
【发布时间】：2015-06-02 05:02:17
【问题描述】：

我是 js 单元测试的新手，我正在尝试将 mocha 用于我在 this github repo 找到的主干联系人管理器教程。但是，我有一个全局 window.ContactManager 变量，我首先想测试它是否存在，然后稍后在 start 函数中测试 router.on 功能。变量如下所示：

  window.ContactManager = {
  Models: {},
  Collections: {},
  Views: {},

  start: function(data) {
    var contacts = new ContactManager.Collections.Contacts(data.contacts),
        router = new ContactManager.Router();

    router.on('route:home', function() {
      router.navigate('contacts', {
        trigger: true,
        replace: true
      });
    });

    router.on('route:showContacts', function() {
      var contactsView = new ContactManager.Views.Contacts({
        collection: contacts
      });
.....

我的测试不起作用： var expect = require ('chai').expect;

describe("Application", function() {
    it('creates a global variable for the name space ContactManager' , function () {
        expect(ContactManager).to.exist;
    })
});

如何通过在控制台中运行测试来测试和访问 mocha 中存在的全局窗口变量？

【问题讨论】：

expect(window.ContactManager).to.exist; ?
是的。我认为第一个测试是测试它是否存在，然后在 start 函数中测试路由器触发器。请查看编辑

标签： javascript node.js backbone.js mocha.js chai

【解决方案1】：

您忽略了在浏览器中运行 JavaScript 代码和在 Node 中运行 JavaScript 代码之间的区别。

在浏览器中，window 名称是对包含所有全局变量的对象的引用。因此，当您在最外层范围内执行foo = 1 时，您声明了一个全局foo，它也可以作为window.foo 访问。相反，如果您分配一个像这样的新字段：window.bar = 1，那么您将拥有一个名为 bar 的新全局。

在 Node 中，您的全局对象以global 访问。因此，如果您在最外层范围内执行foo = 1，则foo 也可以作为global.foo 访问。如果您执行global.bar = 1，您将拥有一个名为bar 的新全局。

您的代码显示您修改了一个window 对象，该对象似乎不是对全局对象的引用。选项：

在浏览器中而不是在 Node.js 中运行 Mocha。见Mocha's documentation。
设置您的 Node 环境，使其模拟足够多的浏览器环境来满足 node.将全局 window 变量设置为等于 global 可能就足够了，但我不知道 Backbone 是否会对此感到满意。
在 jsdom 中运行基于 Backbone 的代码。 Jsdom 提供了逼真的window 和document，就像你的代码在浏览器中运行一样，但它有其局限性。我不知道 Backbone 是否会对这些限制感到满意。

【讨论】：

【解决方案2】：

另一种解决方案是使用https://www.npmjs.com/package/window-or-global

import React, { Component } from 'react'
// in node, you'll get the global object instead of crashing by an error 
import root from 'window-or-global'

class MyComponent extends Component {

  // this method is only invoked in the browser environment 
  componentDidMount() {
    root.addEventListener(/*...*/)
  }

  componentWillUnmount() {
    root.addEventListener(/*...*/)
  }

  render() {}

}

// Voilà. Enjoy your universal react component! ;) 
// No more 'window is not defined' errors when you render your component 
// on server side.

要安装，请运行npm install --save window-or-global。

在服务器上运行测试（例如使用mocha-webpack）比在浏览器中运行更快。

【讨论】：