Question

使用React 13.2并使用此gist上显示的设置来测试生命周期。如果我没有停止后续渲染（通过 shouldComponentUpdate 方法），那么任何事情都会导致渲染（在初始之后）与 DOMException Wrong Document 爆炸：

     DOMException: Wrong document
 at core.Node.insertBefore (D:\development\projects\fsm\node_modules\jsdom\lib\jsdom\level1\core.js:583:13)
 at core.Node.insertBefore (D:\development\projects\fsm\node_modules\jsdom\lib\jsdom\level2\events.js:326:32)
 at insertChildAt (D:\development\projects\fsm\node_modules\react\lib\DOMChildrenOperations.js:34:14)
 at Object.DOMChildrenOperations.processUpdates (D:\development\projects\fsm\node_modules\react\lib\DOMChildrenOpertions.js:106:11)

JSDOM失败，因为父节点不是文档，并且它不与插入的子节点共享相同的所有者文档。是啊。除非React正在做一些时髦的事情，否则拥有的文件怎么可能不是全球性的。

我很惊讶我没有看到更多人遇到类似的问题？我的Mocha设置和渲染的JSX组件都没有什么奇怪的东西。再加上初始渲染就可以了。

Answer 1

节点4的更新

使用节点4，我们可以使用最新的jsdom并以更好的方式解决此问题，例如使用testdom。

这是我在节点4上使用mocha测试React 0.13组件的方法：

import testDom from "testdom";
import { expect } from "chai";

testDom("<html><body></body></html>");
const React = require("react/addons");
const MyTestableComponent = require("../src/MyTestableComponent");
const ExecutionEnvironment = require("react/lib/ExecutionEnvironment");
ExecutionEnvironment.canUseDOM = true;

describe("MyTestableComponent", () => {
   it("works!", () => {
       const component = <MyTestableComponent />;
       expect(true).to.equal(true);
   })
})

请注意，我们应该require而不是import React和组件。

上一个回答

我可以通过遵循OP自己对该问题的评论来解决这个问题。

由于React在需要时将document存储在内部变量中，我们需要从require.cache对象中删除React，然后再次要求它：

var jsdom = require("jsdom").jsdom;
var React, TestUtils;

describe("Example", function() {

  beforeEach(function() {
    // remove react from the require cache
    for (var key in require.cache) {
      if (key.match(/\/node_modules\/react\//)) {
        delete require.cache[key];
      }
    }

    // init the DOM
    global.document = jsdom("<html><head><script></script></head><body></body></html>");
    global.window = document.parentWindow;

    // require react again    
    React = require("react/addons");
    TestUtils = React.addons.TestUtils;

  });

  // my tests...

});

React Mocha渲染，DOMException错误的文档

1 个答案: