使用 Mocha 设置 JSDOM答案

【问题标题】：Setting up JSDOM with Mocha使用 Mocha 设置 JSDOM
【发布时间】：2017-10-13 02:58:29
【问题描述】：

我正在尝试使用 sinon 的 mock 和 spy 来测试 Redux 组件和异步操作，但只要我将 sinon 导入任何测试文件，就会运行以下 npm 脚本：

mocha --require test/helpers/browser.js --compilers .:babel-core/register --opts test/client/**/*.{js,jsx} --recursive test/client

我收到以下错误：

var div = typeof document !== "undefined" && document.createElement("div");
                                                      ^

TypeError: document.createElement is not a function at .../node_modules/sinon/lib/sinon/util/core/deep-equal.js:3:55

browser.js 是我设置 JSDOM 的地方：

import { JSDOM } from 'jsdom';

const doc = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
cost win = doc.defaultView; // tried doc.window;

global.document = doc;
global.window = win;

/*
Object.keys(win).forEach(property => {
  if (typeof global[property] === 'undefined') {
    global[property] = win[property];
  }
});
*/

global.navigator = {
  userAgent: 'node.js'
};

我想我没有正确设置 jsdom？我试着环顾四周，在上面的 browser.js 文件中找到了注释代码，但是在取消注释时会产生错误：

Object.keys(win).forEach(function (property) {
       ^

TypeError：无法将 undefined 或 null 转换为对象。

【问题讨论】：

标签： javascript node.js redux mocha.js jsdom

【解决方案1】：

document 是 window 的属性，而不是相反：

const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');

global.window = dom.window;
global.document = dom.window.document;

【讨论】：

这也是通用的反模式github.com/jsdom/jsdom/wiki/…