爲什麼當所有組件都被渲染時，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（組件我做了）正在由試驗檢測，但這不是對播放器組件的情況下。

我在這裏錯過了什麼？

謝謝！

來源

2016-11-21 Nicolas

測試失敗，因爲它也在測試Player組件的屬性。所以，你應該做這樣的事情：

expect(wrapper.contains([ 
     <Player src="http://example.com" autoPlay id="activeModuleAudio" vendor="audio" />, 
     <PlayButton/>, 
     <ProgressBar/>])).to.equal(true)

來源

2016-11-21 20:15:11 Shota

不，我想過，但我試了一下，並沒有工作。 – Nicolas

你有瀏覽器環境配置爲完整的DOM渲染（安裝）嗎？ – Shota

是的，我爲此配置了JSDOM。但我不認爲這是問題，因爲其他組件渲染得很好。 – Nicolas

嘗試：

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

來源

2017-09-24 11:46:23

爲什麼當所有組件都被渲染時，Enzyme包含AllMatchingElements返回false？

回答

相關問題