3

使用 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 组件都没有什么奇怪的地方。加上初始渲染很顺利。

4

1 回答 1

4

节点 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而不是importReact 和组件。

上一个答案

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

由于 React 在需要时将其存储在document内部变量中，因此我们需要在再次需要它之前从对象中删除 React ：require.cache

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...

});
于 2015-05-30T08:40:06.213 回答