酶'find'没有通过其className找到div

我用酶来测试反应成分 . 但是，'find'方法无法找到任何元素 . 找不到className，element等 . 这肯定是我做错了，因为我可以在一个单独的项目中使用.find，但我似乎无法找到我做错了什么 .

• node：6.10.0

• jest-cli：12.1.1

• babel-jest：12.1.0

• 酶：2.7.1

• 开玩笑：19.0.2

• jest-enzyme：2.1.2

• 反应：15.1.0

反应组件

import React from 'react'
import Flippable from '../../components/flippable_two_pane/template'

class FLippableWidget extends React.Component {
  constructor (props) {
    super(props)

    this.defaultState()
  }

  // Set default state
  defaultState () {
    const state = {
      selected: 0
    }

    // If state exists, reset it.
    if (typeof this.state === 'object') {
      this.setState(state)

    // Otherwise, create state.
    } else {
      this.state = state
    }
  }


  // Click handler.
  handleClick (e) {
    const keyPress = e.keyCode
    const keyEnter = keyPress === 13
    // toggle the currently selected
    let index = this.state.selected === 0 ? 1 : 0

    // Exit, if not "Enter" key.
    if (keyPress && !keyEnter) {
      return
    }

    this.setState({
      selected: index
    })

    if (typeof this.props.clickCallback !== 'function') {
      return
    }

    this.props.clickCallback(e, index)
  }

  // Render method.
  render () {
    const classes = 'flippable-widget ' + this.props.className
    var isFlipped = this.props.isFlipped || this.state.selected ? true : false
    const handleClick = this.handleClick.bind(this)
    let children = this.props.children || []

    return (
      <div className='widget'>
        <h2>{this.props.title}</h2>

        {
          children.length === 3
          ? children[2]
          : <ul className='flippable-widget_list'>
            <li
              onClick={(e) => { handleClick(e) }}
              onKeyDown={(e) => { handleClick(e) }}
            >
            </li>
          </ul>
        }

        <Flippable height={this.props.height} isFlipped={isFlipped} widgetCategory={this.props.widgetCategory}>
          {/* front pane */}
          {children[0]}

          {/* back pane */}
          <div className='flippable-widget__overflow-container'>
            {children[1]}
          </div>
        </Flippable>
      </div>
    )
  }
}

FLippableWidget.propTypes = {
  children: React.PropTypes.node,
  className: React.PropTypes.string,
  title: React.PropTypes.string,
  height: React.PropTypes.string
}

export default FLippableWidget

组件测试

import FlippableWidget from '../source/components/widget_flippable/template';
import React from 'react';
import { shallow, mount } from 'enzyme';


jest.autoMockOff();

describe('<FlippableWidget/> ', () => {
  let wrapper;
  let props = {
    children: ['mock-front-pane','mock-back-pane'],
    className: 'mockClassName',
    title: 'mockTitle',
    height: '300px'
  };

  beforeEach(() => {
    wrapper = mount(<FlippableWidget {...props} />);
  });

  //***************************************
  // Test Structure
  //***************************************

  it('receives props upon loading', () => {
    expect(wrapper.prop('className')).toEqual('mockClassName');
    expect(wrapper.prop('title')).toEqual('mockTitle');
    expect(wrapper.prop('height')).toEqual('300px');
    expect(wrapper.prop('children')).toEqual(['mock-front-pane','mock-back-pane']);
  });

  it('renders a div with the correct className', () => {
    // console.log(wrapper).debug();
    expect(wrapper.find('.widget').length).toBe(1);
  });
});

测试道具传递，但第二次测试'..渲染一个div ..'没有通过 . 它显示“预期0为1”的错误 . 我理解错误的含义，但我不明白它为什么会发生 .

console.log（包装）.debug（）

ReactWrapper {
  component:
   ReactClassComponent {
     setChildProps:
      { [Function: bound setChildProps]
        __reactBoundContext: [Circular],
        __reactBoundMethod: [Function: setChildProps],
        __reactBoundArguments: null,
        bind: [Function] },
     setChildContext:
      { [Function: bound setChildContext]
        __reactBoundContext: [Circular],
        __reactBoundMethod: [Function: setChildContext],
        __reactBoundArguments: null,
        bind: [Function] },
     getInstance:
      { [Function: bound getInstance]
        __reactBoundContext: [Circular],
        __reactBoundMethod: [Function: getInstance],
        __reactBoundArguments: null,
        bind: [Function] },
     getWrappedComponent:
      { [Function: bound getWrappedComponent]
        __reactBoundContext: [Circular],
        __reactBoundMethod: [Function: getWrappedComponent],
        __reactBoundArguments: null,
        bind: [Function] },
     props: { Component: [Object], props: [Object], context: null },
     context: {},
     refs: {},
     updater:
      { isMounted: [Function: isMounted],
        enqueueCallback: [Function: enqueueCallback],
        enqueueCallbackInternal: [Function: enqueueCallbackInternal],
        enqueueForceUpdate: [Function: enqueueForceUpdate],
        enqueueReplaceState: [Function: enqueueReplaceState],
        enqueueSetState: [Function: enqueueSetState],
        enqueueElementInternal: [Function: enqueueElementInternal],
        validateCallback: [Function: validateCallback] },
     state: { mount: true, props: [Object], context: null },
     _reactInternalInstance:
      ReactCompositeComponentWrapper {
        _currentElement: [Object],
        _rootNodeID: 0,
        _compositeType: 0,
        _instance: [Circular],
        _hostParent: null,
        _hostContainerInfo: [Object],
        _updateBatchNumber: null,
        _pendingElement: null,
        _pendingStateQueue: null,
        _pendingReplaceState: false,
        _pendingForceUpdate: false,
        _renderedNodeType: 1,
        _renderedComponent: [Object],
        _context: {},
        _mountOrder: 8,
        _topLevelWrapper: [Object],
        _pendingCallbacks: null,
        _calledComponentWillUnmount: false,
        _warnedAboutRefsInRender: false,
        _mountIndex: 0,
        _mountImage: null,
        _debugID: 5 } },
  root: [Circular],
  node:
   FLippableWidget {
     defaultState:
      { [Function: defaultState]
        _isMockFunction: true,
        _getMockImplementation: [Function],
        mock: [Object],
        mockClear: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImpl: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        _protoImpl: [Object] },
     handleClick:
      { [Function: handleClick]
        _isMockFunction: true,
        _getMockImplementation: [Function],
        mock: [Object],
        mockClear: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImpl: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        _protoImpl: [Object] },
     render:
      { [Function: render]
        _isMockFunction: true,
        _getMockImplementation: [Function],
        mock: [Object],
        mockClear: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImpl: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        _protoImpl: [Object] },
     setState:
      { [Function: mockConstructor]
        _isMockFunction: true,
        _getMockImplementation: [Function],
        mock: [Object],
        mockClear: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImpl: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        _protoImpl: [Object] },
     forceUpdate:
      { [Function: mockConstructor]
        _isMockFunction: true,
        _getMockImplementation: [Function],
        mock: [Object],
        mockClear: [Function],
        mockReturnValueOnce: [Function],
        mockReturnValue: [Function],
        mockImplementationOnce: [Function],
        mockImpl: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        _protoImpl: [Object] },
     props:
      { children: [Object],
        className: 'mockClassName',
        title: 'mockTitle',
        height: '300px' },
     context: {},
     refs: {},
     updater:
      { isMounted: [Function: isMounted],
        enqueueCallback: [Function: enqueueCallback],
        enqueueCallbackInternal: [Function: enqueueCallbackInternal],
        enqueueForceUpdate: [Function: enqueueForceUpdate],
        enqueueReplaceState: [Function: enqueueReplaceState],
        enqueueSetState: [Function: enqueueSetState],
        enqueueElementInternal: [Function: enqueueElementInternal],
        validateCallback: [Function: validateCallback] },
     _reactInternalInstance:
      ReactCompositeComponentWrapper {
        _currentElement: [Object],
        _rootNodeID: 0,
        _compositeType: 0,
        _instance: [Circular],
        _hostParent: null,
        _hostContainerInfo: [Object],
        _updateBatchNumber: null,
        _pendingElement: null,
        _pendingStateQueue: null,
        _pendingReplaceState: false,
        _pendingForceUpdate: false,
        _renderedNodeType: 2,
        _renderedComponent: [Object],
        _context: {},
        _mountOrder: 9,
        _topLevelWrapper: null,
        _pendingCallbacks: null,
        _calledComponentWillUnmount: false,
        _warnedAboutRefsInRender: false,
        _mountIndex: 0,
        _mountImage: null,
        _debugID: 6 },
     state: null },
  nodes:
   [ FLippableWidget {
       defaultState: [Object],
       setIconColorByClassName: [Object],
       handleClick: [Object],
       render: [Object],
       setState: [Object],
       forceUpdate: [Object],
       props: [Object],
       context: {},
       refs: {},
       updater: [Object],
       _reactInternalInstance: [Object],
       state: null } ],
  length: 1,
  options: {},
  complexSelector:
   ComplexSelector {
     buildPredicate: [Function: buildInstPredicate],
     findWhereUnwrapped: [Function: findWhereUnwrapped],
     childrenOfNode: [Function: childrenOfInst] } }