为什么当所有组件都被渲染时,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) 
+0

不,我想过,但我试了一下,并没有工作。 – Nicolas

+0

你有浏览器环境配置为完整的DOM渲染(安装)吗? – Shota

+0

是的,我为此配置了JSDOM。但我不认为这是问题,因为其他组件渲染得很好。 – Nicolas

尝试:

const wrapper = mount(
<AudioPlayer audioUrl="http://example.com"> 
    <Player /> 
    <PlayButton/> 
    <ProgressBar/> 
<AudioPlayer/> 
);