我用酶来测试反应成分。但是，找到＆＃39;方法无法找到任何元素。不能通过className，element等找到它。这肯定是我做错了，因为我可以在一个单独的项目中使用.find，但我似乎无法找到我和我＃39;我做错了。
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);
});
});
测试道具传递，但第二次测试＆＃39; ..呈现div ..＆＃39;没有通过。它显示＆＃34;预期0的错误为1＆＃34;。我理解错误的含义，但我不明白它为什么会发生。
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] } }
答案 0 :(得分：0)
原来是React的版本导致了这个问题。通过更新到15.4.2修复