javascript - ReactDOM.findDOMNode 未按预期工作

Question

我被指派修复一些失败的 Jest 测试。这是一个例子:

这是 checkboxGroup.spec.js:

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import CheckboxGroup from '../components/core/CheckboxGroup';
import Checkbox from '../components/core/Checkbox';

describe('CheckboxGroup', () => {
it('should exist', () => {
    expect(CheckboxGroup).toBeDefined();
});

it('should add checkboxes as children', () => {
    class CheckboxGroupSample extends React.Component {
        selected = [];
        render() {
            return (
                <div>
                    <CheckboxGroup selected={ this.selected }>
                        <Checkbox value={ 1 }></Checkbox>
                        <Checkbox value={ 2 }></Checkbox>
                        <Checkbox value={ 3 }></Checkbox>
                    </CheckboxGroup>
                    Selected: { this.selected.toString() }
                </div>
            );
        }
    }

    const checkboxGroup = TestUtils.renderIntoDocument(<CheckboxGroupSample />);

    const checkboxGroupNode = ReactDOM.findDOMNode(checkboxGroup);

    // Verify the correct number of children are created
    expect(checkboxGroupNode.children.length).toEqual(3);
});

这是我的 CheckboxGroup.jsx:

import React, { PropTypes } from 'react';
import valueCompare from './internal/valueCompare';
import Checkbox from './Checkbox';

export default class CheckboxGroup extends React.Component {
    static propTypes = {
        defaultSelected: PropTypes.any,
        selected: PropTypes.any,
        children: PropTypes.node,
        onSelect: PropTypes.func,
        onChange: PropTypes.func,
        name: PropTypes.string
    }

    handleSelect(event, value) {
        if (this.props.onSelect) {
            this.props.onSelect(event, value);
        }
    }

    render() {
        const {
            selected,
            name,
            onChange
        } = this.props;

        return (
            <div>
                { React.Children.map(this.props.children, child =>
                    React.cloneElement(child, {
                        onChange: this.handleSelect,
                        checked: valueCompare(selected, child.props.value),
                        name: name
                    })
                ) }
            </div>
        );
    }
}

第二个测试失败:预期值为 3，但返回值为 1。当我使用 console.log(checkboxGroupNode) 时，它看起来像是从该元素开始。如果我能够到达 ReactDomComponent 的 _renderedChildren，我就会拥有我的 3 个 child 。

HTMLDivElement {
      '__reactInternalInstance$2oq0ezu6d76f7k2ux2n0e2vs4i':
       ReactDOMComponent {
         _currentElement:
          { '$$typeof': Symbol(react.element),
            type: 'div',
            key: null,
            ref: null,
            props: [Object],
            _owner: [Object],
            _store: {} },
         _tag: 'div',
         _namespaceURI: 'http://www.w3.org/1999/xhtml',
         _renderedChildren: { '.0': [Object], '.1': [Object], '.2': [Object] },
         _previousStyle: null,
         _previousStyleCopy: null,
         _hostNode: [Circular],
         _hostParent: null,
         _rootNodeID: 1,
         _domID: 1,
         _hostContainerInfo:
          { _topLevelWrapper: [Object],
            _idCounter: 17,
            _ownerDocument: [Object],
            _node: HTMLDivElement {},
            _tag: 'div',
            _namespaceURI: 'http://www.w3.org/1999/xhtml',
            _ancestorInfo: [Object] },
         _wrapperState: null,
         _topLevelWrapper: null,
         _flags: 1,
         _ancestorInfo:
          { current: [Object],
            formTag: null,
            aTagInScope: null,
            buttonTagInScope: null,
            nobrTagInScope: null,
            pTagInButtonScope: null,
            listItemTagAutoclosing: null,
            dlItemTagAutoclosing: null },
         _contentDebugID: null,
         _mountIndex: 0,
         _mountImage: null,
         _debugID: 2 } }  

该代码是大约一年前编写的 - 失败可能是由于 React 和/或 Jest 的更新，或其他原因。我确信测试会在某个时间点通过。

Answer 1

经过进一步调查，我发现期望应该是:

expect(checkboxGroupNode.childNodes[0].children.length).toEqual(3);

这是 Jest/React 更改的结果，还是测试一开始就写得不正确？