Question

我想测试“视频”组件是否正确加载了视频。我为“视频”组件创建了“ 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的问题。帮我解决这个问题。

Answer 1

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

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

或者您可以重新考虑进行测试以避免进行测试。

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

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

1 个答案: