ReferenceError：未定义 MediaStream - 在带有 Jest 的 unitTest 中答案

【问题标题】：ReferenceError: MediaStream is not defined - in unitTest with JestReferenceError：未定义 MediaStream - 在带有 Jest 的 unitTest 中
【发布时间】：2019-12-16 20:22:57
【问题描述】：

我正在尝试使用 jest 框架运行单元测试。我的项目中有一些用 typescript 编写的 webrtc 相关代码。

我不断收到此错误。我试图模拟 MediaStream 但无济于事。

我的测试文件：

import * as React from "react";
import * as renderer from 'react-test-renderer';
import { Provider } from 'react-redux';
const configureStore = require('redux-mock-store');


import App from '../App';
import mockData from "../mockData";
const mockStore = configureStore();

describe('Tests related to App', () => {
    it('Capturing Snapshot of App', () => {
        let store = mockStore(mockData.getStore());
        const renderedValue = renderer.create(<Provider store={store}><App /></Provider>).toJSON();;
        expect(renderedValue).toMatchSnapshot();
    });
})

我了解 MediaStream 是平台级别的属性。所以我试图嘲笑，这样 Jest 会理解，但无济于事。

我的模拟代码。

let mediaStream = {
        getVideoTracks: function() {
            return [];
        }
    }

    const mediaDevicesMock = {
        getUserMedia: jest.fn(() => { return Promise.resolve(mediaStream)})
      };

    global.navigator.mediaDevices = mediaDevicesMock;

我可能在多个层面上都错了，欢迎任何建议和纠正。我试图理解这个link，但想不通。

笑话版本：“^22.1.4”

【问题讨论】：

标签： typescript unit-testing jestjs webrtc mediastream

【解决方案1】：

为了通过这样的测试，我嘲笑了MediaRecorder：

Object.defineProperty(window, 'MediaRecorder', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
        start: jest.fn(),
        ondataavailable: jest.fn(),
        onerror: jest.fn(),
        state: '',
        stop: jest.fn()
    }))
});

另外，我还模拟了isTypeSupported方法：

Object.defineProperty(MediaRecorder, 'isTypeSupported', {
    writable: true,
    value: () => true
});

【讨论】：

【解决方案2】：

mediaDevices 接口尚未在 JSDOM 中实现。您也许可以使用他们官方文档中的代码存根来模拟它：https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

【讨论】：