jest spyOn navigator.mediaDevices

Question

我现在正在写一个小型的库来帮助连接到媒体设备，如果我能对这个库进行单元测试，我会很高兴，我在我的打字本库中有一个类似这样的函数，

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);

})

但我发现了错误：

不能对原语值进行spyOn；未定义

有人能帮我个忙吗？

Answer 1

navigator.mediaDevices不是由JSDOM实现的。所以window.navigator.mediaDevices是undefined，这就是为什么你会有这个错误。看看未在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