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不按預期方式工作

回答

相關問題