Jest.js 如何模拟导航器媒体玩笑设备

plupiseo 于 2022-12-08 发布在 Jest

关注(0)|答案(3)|浏览(160)

我有一个需要使用navigator.mediaDevices的测试，但是我无法让任何mock正常工作。
我使用的是create-react-app。
下面是我的测试：

import getConnectedDevices from "./getConnectedDevices";

describe("getConnectedDevices", () => {
  it("Should work", () => {
    console.log(navigator);              // Navigator {}
    console.log(navigator.mediaDevices); // undefined
  });
});

我已经尝试添加一个mock，正如它在jest文档中所述
第一次
我还尝试根据create-react-app文档初始化测试环境。

// src/setupTests.ts

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

const navigatorMock = {
  mediaDevices: {
    enumerateDevices: jest.fn(),
  },
};

global.navigator = navigatorMock;

我做错了什么？

jestjs

来源：https://stackoverflow.com/questions/65216451/how-to-mock-navigator-mediadevices-for-jest

3条答案

按热度按时间

xam8gpfp1#

我是用 typescript 写的：

const mockGetUserMedia = jest.fn(async () => {
    return new Promise<void>(resolve => {
        resolve()
    })
})

Object.defineProperty(global.navigator, 'mediaDevices', {
    value: {
        getUserMedia: mockGetUserMedia,
    },
})

赞(0）回复(0）举报 2022-12-08

rbpvctlc2#

看起来因为已经存在navigator对象，所以不可能重新分配它。
多亏了this stackoverflow answer，您可以模拟navigator中的对象，并将其分配给现有的导航器对象。

// src/setupTests.ts

const mediaDevicesMock = {
  enumerateDevices: jest.fn(),
};

global.navigator.mediaDevices = mediaDevicesMock; // here

注意：这将引发TSC错误Cannot assign to 'mediaDevices' because it is a read-only property.ts(2540)。仍在尝试解决该问题。

赞(0）回复(0）举报 2022-12-08

dvtswwa33#

这对我很有效：

const mediaDevicesMock = jest.fn(async () => {
  return new Promise<void>((resolve) => {
    resolve();
}); 
});

beforeEach(() => {
 Object.defineProperty(global.navigator, 'mediaDevices', {
  value: {
    enumerateDevices: mediaDevicesMock,
  },
});
})

赞(0）回复(0）举报 2022-12-08

我来回答

Jest.js 如何模拟导航器媒体玩笑设备

3条答案

相关问题

热门标签

最新问答