WebAPI window.navigator.mediaDevices のモックを生成
以下の構成で説明する
まずjsdom
を用いて、nodejsで動作可能なwindow.navigator
を生成し、mockMediaDevices()
によって生成されるmediaDevices
オブジェクトをwindow.navigator
へ登録するセットアップモジュールを作成する
test/setup.ts
// test/setup.ts
import jsdom from "jsdom";
import { mockMediaDevices } from "@rksan/mock-media-devices";
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html>`);
const fakeMediaDevices = mockMediaDevices();
// nodejs
globalThis.navigator ??= dom.window.navigator;
if(Object.prototype.hasOwnProperty.call(navigator, "mediaDevices")){
Object.defineProperty(navigator, "mediaDevices". {value: fakeMediaDevices})
}
次に、テストコード内でtest/setup.ts
を呼び出してテストコードを実行する
// test/index.spec.ts
import { describe, it } from "mocha";
import { assert } from "chai";
// call setup module
import "test/setup.ts";
// Implementation of test runner
describe("unit testing...", () => {
it("mediaDevices", (done) => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
// test codes ...
done();
})
.catch((err) => {
done(err);
});
});
});
npm i -D @rksan/mock-media-devices
- Node.js - v18.x
const mediaDevices: MediaDevices =
mockMediaDevices(deviceInfos?: MediaDeviceInfo[])
@type
MediaDeviceInfo[]
@default
次に記載
[
{
deviceId: UUID, // *1
groupId: UUID,
kind: "videoinput",
label: "mock-videoinput-device",
},
{
deviceId: UUID,
groupId: UUID,
kind: "audioinput",
label: "mock-audioinput-device",
},
{
deviceId: UUID,
groupId: UUID,
kind: "audiooutput",
label: "mock-audiooutput-device",
},
];
*1 UUDD
は nodejs
標準パッケージ crypto.randomUUID()
にて生成される
@rksan https://github.com/rksan | github
MIT