在测试中使用酶模拟“结束”事件?

时间:2017-01-10 22:41:03

标签: unit-testing reactjs enzyme

您好我正在尝试模拟“已结束”事件和HTML5音频元素但未成功。这是我的组成部分:

export class AudioPlayer extends Component {
    constructor (props) {
        super(props);

        // Auto play turned off when component render for the first time

        this.autoPlay = false;
        this.shouldAudioAutoPlay = this.shouldAudioAutoPlay.bind(this);
    }

    componentDidMount () {
        let audio = findDOMNode(this.player);
        if (audio) {
            console.log('in')
            audio.addEventListener('ended', () => {
                console.log('event dispatched')
                this.props.audioFinished();
            });
        }

    }

    render () {
        return (
            <Media>
                <div>
                    <div className="media-player">
                        <Player src={this.props.audioUrl.url}
                            autoPlay={false}
                            id="activeModuleAudio"
                            vendor="audio"
                            ref={(player) => { this.player = player }}
                        />
                    </div>
                    <div className="ap-main">
                        <div className="ap-controls">
                            <PlayButton />
                            <ProgressBar enableUserInput={this.props.enableUserInput} audio={this.props.audioUrl} />
                        </div>
                        <a href={this.props.facebookUrl}><div className="ap-facebook-group" /></a>
                    </div>
                </div>
            </Media>
        );
    }
}

在这里测试:

it('should dispatch an action when audio is finished', () => {
        let mockedAudioFinishedAction = jest.fn();
        let mockedEnableUserInputAction = jest.fn();
        let mountedWrapper = mount(
            <AudioPlayer
                audioUrl={{ url: 'audio-url', autoPlay: true }}
                facebookUrl="facebook-url" audioFinished={mockedAudioFinishedAction}
                enableUserInput={mockedEnableUserInputAction}
            />
        );
        mountedWrapper.update();
        mountedWrapper.update();
        mountedWrapper.find(Player).simulate('ended');
        expect(mockedAudioFinishedAction.mock.calls.length).toBe(1);
    });

尽管在浏览器上工作,但模拟似乎并未调度此事件。有什么想法吗?

提前致谢!

0 个答案:

没有答案