jest spyOn navigator.mediaDevices答案

【问题标题】：jest spyOn navigator.mediaDevicesjest spyOn navigator.mediaDevices
【发布时间】：2021-03-14 15:31:39
【问题描述】：

我目前正在编写一个小型库来帮助连接到媒体设备，如果我可以对该库进行单元测试，那就太好了，我的 typescript 库中有一个看起来像这样的函数，

static connectAudioDevice(device?: InputDeviceInfo) : Promise<MediaStream> {
    return new Promise<MediaStream>((resolve, reject) => {
        navigator.mediaDevices.getUserMedia({audio: true})
            .then(stream => {
                resolve(stream);
            })
            .catch(error => {
                resolve(error);
            })
    })
}

我想用jest.spyOn 来模拟getUserMedia 这可能吗？类似的，

import devices from '@/assets/lib/devices.ts';

test('Resolves with valid audio mediaStream', () => {

    const audioStream = {};
    let promise = devices.connectAudioDevice();

    jest.spyOn(window.navigator.mediaDevices, 'getUserMedia', promise);

})

但我得到了错误：

无法窥探原始值；给定的未定义

谁能帮帮我？

【问题讨论】：

标签： javascript typescript dom jestjs spy

【解决方案1】：

navigator.mediaDevices 不是由 JSDOM 实现的。所以window.navigator.mediaDevices 是undefined，这就是你得到错误的原因。看看Mocking methods which are not implemented in JSDOM。

解决办法是：

device.ts:

export default class Devices {
  public static connectAudioDevice(device?: InputDeviceInfo): Promise<MediaStream> {
    return new Promise<MediaStream>((resolve, reject) => {
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          resolve(stream);
        })
        .catch((error) => {
          resolve(error);
        });
    });
  }
}

device.test.ts:

import devices from './deivce';

describe('65112057', () => {
  test('Resolves with valid audio mediaStream', async () => {
    const mockMediaDevices = {
      getUserMedia: jest.fn().mockResolvedValueOnce('fake data' as any),
    };
    Object.defineProperty(window.navigator, 'mediaDevices', {
      writable: true,
      value: mockMediaDevices,
    });
    const actual = await devices.connectAudioDevice();
    expect(actual).toBe('fake data');
    expect(mockMediaDevices.getUserMedia).toBeCalledWith({ audio: true });
  });
});

单元测试结果：


 PASS  src/stackoverflow/65112057/device.test.ts
  65112057
    ✓ Resolves with valid audio mediaStream (7ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |       80 |      100 |       75 |       80 |                   |
 deivce.ts |       80 |      100 |       75 |       80 |                10 |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.994s, estimated 13s

【讨论】：