Question

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

首先，我的组件完美运行，因此测试环境存在问题。

情况：

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

现在，如果我注释掉componentDidMount，并断言如下所示的内容，它就能完美运行，所以组件确实会渲染出那些选择的标签。

    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文档对象在我的测试环境中不存在导致我使用'假的'，如果是这样，我该如何测试呢？

下面是我对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代码中避免使用文档，因为它无法进行通用渲染。

反应中的mocha JSDOM测试，getElementById返回null

1 个答案: