Почему Enzyme содержитAllMatchingElements, возвращающий false, когда все компоненты визуализируются?

Question

Я начинаю тестировать приложение React с помощью Enzyme. Первый компонент Я пытаюсь тест ручной работы аудиоплеер:

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.

Что мне здесь не хватает?

Спасибо!

Answer 1

Тестирование не выполняется, поскольку оно также проверяет атрибуты компонента компонента. Так что вы должны сделать что-то вроде этого:

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

Answer 2

Try:

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