反应笑话和酶测试。如何将视频源正确传递给<video/>

Question

我想测试 'video' 组件是否正确加载了视频。我为 'video' 组件创建了 'videoStream' ref :

<video ref={videoStream} width="100%" preload="auto">
   <source src={this.props.video_source} type={this.props.file_type}/>
</video>

在我的 videoPlayer.test.js 中：

wrapper = mount(<VideoPlayer video_source={"/video_samples/video.mp4"} file_type={"video/mp4"}/>);
describe('Video player', () => {
    it('should correctly load video', async () => {
            jest.useFakeTimers();
            setTimeout(() => {
                expect(wrapper.instance().videoStream.current).toBeDefined();
                expect(wrapper.instance().videoStream.current.duration).toBeGreaterThan(0);
              }, 4500);
            jest.runAllTimers();
        });
    }

/video_samples/video.mp4 存储在 public 文件夹中。

当使用 'npm start' 启动项目时，视频加载正确且持续时间为 15。但是当我这样做时 'npm test'，持续时间始终为 0。它应该大于 0。

我猜是将源代码传递给 VideoPlayer 的问题。帮我解决这个问题。

Answer 1

Jest 在后台使用的 JSDom 不会模拟浏览器的所有功能。其中，<video> 未完全支持。

您可以扩展 VideoHTMLElement manually 来模拟您要测试的逻辑。

或者您可以重新考虑您的测试以避免测试它。

在你的特定情况下，我认为没有必要用单元测试来测试它，你可以将它包含在手动或基于 Selenium 的测试中。

反应笑话和酶测试。如何将视频源正确传递给<video/>

React jest & enzyme testing. How to correctly pass video source to <video/>

testing

video

reactjs

jestjs

enzyme