TypeError: document.createElement is not a function - React, Mocha, JSDOM 测试答案

【问题标题】：TypeError: document.createElement is not a function- React, Mocha, JSDOM testingTypeError: document.createElement is not a function - React, Mocha, JSDOM 测试
【发布时间】：2018-03-02 17:11:21
【问题描述】：

我之前写过一个测试脚本，它与下面给出的脚本非常相似。以下版本的库运行良好

"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7"

我修改了使用 jsdom 创建 DOM 的方式，以便脚本使用以下版本的库运行。

"chai": "^4.1.2",
"chai-jquery": "^2.0.0",
"jquery": "^3.3.1",
"jsdom": "^11.6.2",
"mocha": "^5.0.1",
"react-addons-test-utils": "^15.6.2"

但是我收到如下错误：

 App
    1) "before each" hook for "renders something"


  0 passing (31ms)
  1 failing

  1) App
       "before each" hook for "renders something":
     TypeError: document.createElement is not a function
      at Object.renderIntoDocument (node_modules/react-dom/cjs/react-dom-test-utils.development.js:741:24)
      at renderComponent (test/test_helper.js:21:40)
      at Context.<anonymous> (test/components/app_test.js:8:17)

这是我的应用测试文件

import { renderComponent , expect } from '../test_helper';
import App from '../../src/components/App';

describe('App' , () => {
  let component;

  beforeEach(() => {
    component = renderComponent(App);
  });

  it('renders something', () => {
    expect(component).to.exist;
  });
});

这是我的测试帮助文件

import _$ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import {JSDOM} from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from '../src/reducers';

global.document = new JSDOM('<!doctype html><html><body></body></html>');
global.window = global.document.window;
console.log(global.document);
global.navigator = global.window.navigator;
const $ = _$(window);

chaiJquery(chai, chai.util, $);

function renderComponent(ComponentClass, props = {}, state = {}) {
  const componentInstance =  TestUtils.renderIntoDocument(
    <div></div>
  );

  return $(ReactDOM.findDOMNode(componentInstance));
}

$.fn.simulate = function(eventName, value) {
  if (value) {
    this.val(value);
  }
  TestUtils.Simulate[eventName](this[0]);
};

export {renderComponent, expect};

我已经在寻找解决方案，但找不到任何突破口。谁能告诉我为什么TestUtils.renderIntoDocument 不能创建一个简单的div。

注意：我特意在 TestUtils.renderIntoDocument 调用中放置了一个 div，以便调试始终通过测试。

【问题讨论】：

也许这条注释很重要：“在你导入 React 之前，你需要拥有全局可用的 window、window.document 和 window.document.createElement。否则 React 会认为它无法访问 DOM 并且像setState 这样的方法不起作用。”参考reactjs.org/docs/test-utils.html#renderintodocument
另外，我完全推荐你使用 Jest + Enzyme 来测试你的应用程序。你用的方法太臃肿了，用的是jQuery。有了 Enzyme，您的生活会轻松很多。
@nbkhope 如何在我的文件中执行此操作。我想我已经这样做了？？？

标签： reactjs testing mocha.js tdd jsdom

【解决方案1】：

改变JSDOM的行：

global.dom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = global.window.navigator;

【讨论】：

【解决方案2】：

你可以试试这个

function documentmock() {
  var storage = {};

  return {
    getElementById: function (id) {
      return {
        getBoundingClientRect: function () {
          return {
            top: 701,
            bottom: 702,
          };
        },
        width: 1000,
        height: 400,
      };
    },
    createElement: function (id) {
      return {
        width: 1000,
        height: 500,
        getContext: function () {
          return {
            drawImage: function () {},
          };
        },
        toDataURL: function () {
          return {
            replace: function () {},
          };
        },
        touchAction: '',
      };
    },
  };
}

describe('VerificarRPH tests', () => {
  global.document = sinon.spy();

  beforeEach(() => {
    global['document'] = documentmock();
  });
});

【讨论】：