mocha JSDOM 测试反应，getElementById return null

Question

我正在使用 mocha 和 JsDom 来测试我的 React 组件。

首先我的组件工作完美，所以它是测试环境的问题。

情况：

我有一个组件可以呈现几个带有 id 的 select 标签。然后组件中的 componentDidMount 将使用 document.getElementById 获取那些 select 标签并向它们添加选项。但是当我运行我的测试时，它显示这些 getElementById.

为空

现在，如果我注释掉 componentDidMount，并声明如下所示的内容，它会完美运行，因此该组件确实呈现了那些 select 标签。

    describe('test component', function(){
      var renderedElement = ReactTestUtils.renderIntoDocument(<Component/>);
      var renderedNode = ReactDom.findDOMNode(renderedElement);
      it('should have the proper markup', function(){
        assert.equal(renderedNode.childElementCount, 5);
       [...]
      })
    })

导致问题的原因是什么？是不是因为 document.getElementById 我的测试环境中不存在文档对象，因为我使用的是 'fake'，如果是，我应该如何测试它？

下面是我为 mocha 设置的 jsdom

    (function () {
        'use strict';

        var jsdom = require('jsdom'),
            baseHTML,
            window;

        if (!global.window) {
            baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>';
            window = jsdom.jsdom(baseHTML).defaultView;

            global.window = window;
            global.document = window.document;
            global.navigator = window.navigator;
        }

    }());

Answer 1

因此，在 React 中访问已安装的 DOM 组件的规范方法是使用 ref。在渲染元素时，不要在 componentDidMount 中使用 document.getElementById() 而是在元素上使用 ref={(element) => { /* Do something with element like this.element = element to save it */ }} 。这将使用已安装的 DOM 元素获得正确的回调，而无需引用文档。

应尽可能避免在 React 代码中使用 document，因为它无法进行通用渲染。

mocha JSDOM 测试反应，getElementById return null

mocha JSDOM testing on react, getElementById return null

mocha.js

jsdom

reactjs