ReactDOM.findDOMNode不按预期方式工作

我已被分配来修复一些失败的Jest测试。这里有一个例子：ReactDOM.findDOMNode不按预期方式工作

这是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> 
     ); 
    } 
}

第2测试失败：预期值是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 } }

的代码写在一年前 - 失败可能是因为更新的反应和/或玩笑，或其他一些原因。我确信测试通过了一个时间点。

来源

2017-01-27 rainslg

在进一步的调查，我发现，预期应该是：

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

这是结果的玩笑/变化做出反应，或者是在第一时间正确写入测试？

来源

2017-01-27 17:14:18 rainslg

ReactDOM.findDOMNode不按预期方式工作

回答

相关问题