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

【问题标题】：React jest & enzyme testing. How to correctly pass video source to <video/>反应笑话和酶测试。如何正确地将视频源传递给 <video/>
【发布时间】：2020-04-15 21:26:03
【问题描述】：

我想测试“视频”组件是否正确加载了视频。我为“视频”组件创建了“videoStream”参考：

<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 存储在公共文件夹中。

使用“npm start”启动项目时，视频加载正确且持续时间为 15。但是当我执行“npm test”时，持续时间始终为 0。应该大于 0。

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

【问题讨论】：

标签： reactjs testing video jestjs enzyme

【解决方案1】：

Jest 在底层使用的JSDom 并不模拟浏览器的所有功能。其中不完全支持<video>。

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

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

在您的特定情况下，我认为无需使用单元测试对其进行测试，您可以将其包含在手动或基于 Selenium 的测试中。

【讨论】：