我试图通过使用Enzyme进行浅层渲染来测试子组件是否存在。但是,它似乎没有超过组件的返回,而是浅呈现<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>
。
答案 0 :(得分:1)
shallow
渲染器有意限制为仅对根组件进行操作,以使测试更加孤立。在装饰者或&#34;包装&#34;像这样的组件,包装组件不是我们想要测试的。由于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)
})