Reactjs mocha JSDOM测试react，getElementById返回null_Reactjs_Mocha.js_Jsdom

Reactjs mocha JSDOM测试react，getElementById返回null

reactjs

Reactjs mocha JSDOM测试react，getElementById返回null,reactjs,mocha.js,jsdom,Reactjs,Mocha.js,Jsdom,我正在使用mocha和JsDom测试我的react组件首先，我的组件工作得很好，所以这是测试环境的问题情况：我有一个组件，它呈现两个id为的select标记。然后在该组件中有一个componentDidMount，该组件将使用document.getElementById获取这些select标记并向其添加选项。但是，当我运行测试时，这些getElementById显示为null 现在，如果我注释掉componentDidMount，并断言下面这样的东西，它工作得很好，因此组件确实呈现了那些

我正在使用mocha和JsDom测试我的react组件

首先，我的组件工作得很好，所以这是测试环境的问题

情况：

我有一个组件，它呈现两个id为的

select

标记。然后在该组件中有一个

componentDidMount

，该组件将使用

document.getElementById

获取这些select标记并向其添加选项。但是，当我运行测试时，这些

getElementById

显示为null

现在，如果我注释掉

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);
       [...]
      })
    })

因此，在React中访问装载的DOM组件的规范方法是使用ref。而不是在组件中使用document.getElementById（）。在呈现元素时，在元素上使用

ref={（element）=>{/*对元素执行类似的操作。element=element保存它*/}

。这将获得装载DOM元素的正确回调，而无需引用文档

如果可能的话，应该避免在React代码中使用文档，因为它使通用呈现变得不可能

    (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;
        }

    }());