[英]Enzyme not shallow rendering child
我试图通过使用酶对其进行浅渲染来测试子组件是否存在。 然而,它似乎并没有超过组件的返回,而是浅渲染<undefined />
。
import PropTypes from 'prop-types'
import React from 'react'
import createReactClass from 'create-react-class'
import ImmutablePropTypes from 'react-immutable-proptypes'
import MainComponent from './MainComponent'
import {addSelection} from '../../actions/betslip'
import {connect} from 'react-redux'
export const MainComponentContainter = createReactClass({
displayName: 'MainComponentCont',
propTypes: {
displayMode: PropTypes.string,
other: ImmutablePropTypes.map,
addSelection: PropTypes.func,
prices: ImmutablePropTypes.map,
selections: ImmutablePropTypes.map,
},
render() {
return (
<div>
{this.props.other.valueSeq().map(this.renderMain)}
</div>
)
},
renderMain(other) {
const yesOutcome = other.get('markets').first().get('outcomes').first()
const newPrice = this.props.prices.getIn([yesOutcome.get('id'), 'price'])
if (newPrice) {
return (
<MainComponent key={other.get('id')}
...some other props/>
)
}
return null
}
})
const mapStateToProps = () => {
return (state) => {
const displayMode = state.ui.get('displayMode')
const selections = state.stp.get('selections')
const prices = state.catalog.get('prices')
const other = state.catalog.get('other')
return {
displayMode,
other,
prices,
selections,
}
}
}
const mapDispatchToProps = {
addSelection,
}
export default connect(mapStateToProps, mapDispatchToProps)(MainComponentContainer)
这基本上只是将另一个组件返回到上述组件。
return (
<div style={[styles.container, styles.container[displayMode]]}>
<div style={[styles.logo, styles.logo[displayMode]]}>
{renderLogo(displayMode, quoteExtraLogo)}
{displayMode === 'mobile' &&
renderButton({displayMode, selected, suspended, clickHandler})}
</div>
<div style={[styles.content, styles.content[displayMode]]}>
<h2 style={[styles.headline, styles.headline[displayMode]]}>
{title}
</h2>
<div style={[styles.offer, styles.offer[displayMode]]}>
<div style={[styles.details, styles.details[displayMode]]}>
<p style={[styles.market, styles.market[displayMode]]}>
{text}
</p>
<div>
<p style={[styles.improvedOdds, styles.improvedOdds[displayMode]]}>
<span style={styles.improvedOddsAt}>a</span> {newPrice}
</p>
<p style={[styles.previousOdds, styles.previousOdds[displayMode]]}>
invece di{' '}
<span className="strikethrough">
{oldPrice}
</span>
</p>
</div>
</div>
{displayMode === 'desktop' &&
renderButton({displayMode, selected, suspended, clickHandler})}
</div>
</div>
</div>
)
describe.only('MainComponentContainer Component', () => {
beforeEach(() => {
sandbox = sinon.sandbox.create()
addSelectionSpy = sinon.spy()
})
afterEach(() => {
sandbox.restore()
})
function getOutput({
displayMode = 'mobile',
other = mockData,
addSelection = spy,
prices = pricesMock,
selections = selectionsMock,
} = {}) {
return shallow(
<MainComponentContainer
displayMode = {displayMode}
other = {mockData}
addSelection = {addSelection}
prices = {prices}
selections = {selections}
/>
)
}
it('should include a MainComponent component', () => {
const pb = getOutput().find('MainComponent')
expect(pb.length).to.equal(1)
})
进行上述测试时(应包含MainComponent
组件),出现以下错误:
AssertionError: expected 0 to equal 1 + expected - actual -0 +1
但是我已经注销了getOutput().debug()
,它返回<div><undefined /></div>
。
shallow
渲染器有意限制在仅对根组件进行操作,以便使测试更加隔离。 在装饰器或像这样“包装”的组件的情况下,包装的组件不是我们想要测试的。 由于MainComponentContainer
是一个 HOC,你会面临这个问题。
有两种方法可以解决这个问题,要么
首先导出未修饰的组件
export default connect(mapStateToProps, mapDispatchToProps)(MainComponentContainer)
export {MainComponentContainer as ComponentContainer};
并测试像
return shallow(
<ComponentContainer
displayMode = {displayMode}
other = {mockData}
addSelection = {addSelection}
prices = {prices}
selections = {selections}
/>
)
或使用.dive
it('should include a MainComponent component', () => {
const pb = getOutput().dive().find('MainComponent')
expect(pb.length).to.equal(1)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.