为什么当所有组件都被渲染时,Enzyme包含AllMatchingElements返回false?
问题描述:
我开始使用酶测试我的React应用程序。我想测试第一部分是一个手工制作的音频播放器:为什么当所有组件都被渲染时,Enzyme包含AllMatchingElements返回false?
import React, { Component } from 'react';
import { Media, Player } from 'react-media-player';
import PlayButton from '../audio_player/play_button'
import ProgressBar from '../audio_player/progress_bar';
export default class AudioPlayer extends Component {
constructor (props) {
super(props)
}
render() {
return (
<Media>
<div className="ap-main">
<div className="media-player">
<Player src={this.props.audioUrl} autoPlay id="activeModuleAudio" vendor="audio" />
</div>
<div className="ap-controls">
<PlayButton />
<ProgressBar />
</div>
<div className="ap-facebook-group">
<a href="http://facebook.com">
Facebook
</a>
</div>
</div>
</Media>
);
}
}
AudioPlayer.propTypes = {
audioUrl: React.PropTypes.string.isRequired,
};
我使用下面库为媒体和播放器元件https://github.com/souporserious/react-media-player
在我的测试文件,我做了以下内容:
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import {expect} from 'chai';
import AudioPlayer from '../../js/components/active_course/audio_player';
import { Media, Player } from 'react-media-player';
import PlayButton from '../../js/components/audio_player/play_button'
import ProgressBar from '../../js/components/audio_player/progress_bar';
describe('audio player component',() => {
it('should render',()=>{
const wrapper = mount(<AudioPlayer audioUrl="http://example.com"/>);
expect(wrapper.contains([
<Player />,
<PlayButton/>,
<ProgressBar/>])).to.equal(true)
})
})
PLAYBUTTON和ProgressBarr(组件我做了)正在由试验检测,但这不是对播放器组件的情况下。
我在这里错过了什么?
谢谢!
答
测试失败,因为它也在测试Player组件的属性。所以,你应该做这样的事情:
expect(wrapper.contains([
<Player src="http://example.com" autoPlay id="activeModuleAudio" vendor="audio" />,
<PlayButton/>,
<ProgressBar/>])).to.equal(true)
答
尝试:
const wrapper = mount(
<AudioPlayer audioUrl="http://example.com">
<Player />
<PlayButton/>
<ProgressBar/>
<AudioPlayer/>
);
不,我想过,但我试了一下,并没有工作。 – Nicolas
你有浏览器环境配置为完整的DOM渲染(安装)吗? – Shota
是的,我为此配置了JSDOM。但我不认为这是问题,因为其他组件渲染得很好。 – Nicolas