Question

我开始使用Enzyme测试我的React应用程序。我试图测试的第一个组件是手工制作的音频播放器：

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（我已经制作的组件），但播放器组件不是这种情况。

我在这里缺少什么？

谢谢！

Answer 1

尝试：

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

为什么Enzyme包含AllMatchingElements在呈现所有组件时返回false？

1 个答案: