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个孩子。

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更改的结果，还是首先测试错误？

ReactDOM.findDOMNode无法按预期工作

1 个答案: