使用 ts-mockito 模拟 WebAPI 接口

Question

我正在为一个使用 browser WebAPI interface 的类编写单元测试。
我使用 ts-mockito 来模拟界面（在我的例子中是 WebGL2RenderingContext）。

当我运行测试时，Node 抛出 ReferenceError: WebGL2RenderingContext is not defined 这是可以理解的，因为测试是在NodeJS环境下运行的，不是浏览器，所以类/接口不存在。

有什么方法可以让 NodeJS 环境感知 WebAPI 接口，以便它可以被模拟？

注意：由于它是一个单元测试，它应该不在真正的浏览器上运行。
jsdom 似乎是一个可能的解决方案，但我不知道如何用 ts-mockito 模拟它。

---

以下 sn-p 说明了我正在尝试做的事情：

import { mock, instance, verify } from 'ts-mockito'

// ========== CLASS ==========
class DummyClass {
    dummyMethod() : void {}
}

class TestedClass {
    static testDummy(dummy : DummyClass) : void {
        dummy.dummyMethod();
    }

    static testGlCtx(glCtx : WebGL2RenderingContext) : void {
        glCtx.flush();
    }
}

// ========== TEST ==========
describe('DummyClass', () => {
    // This test passed successfully
    it('works fine', () => {
        const mockDummy = mock(DummyClass);

        TestedClass.testDummy( instance(mockDummy) );

        verify( mockDummy.dummyMethod() ).once();
    });
});

describe('WebGL interface', () => {
    it('works fine', () => {
        // This line failed with 'ReferenceError: WebGL2RenderingContext is not defined'
        const mockGLCtx = mock(WebGL2RenderingContext);

        TestedClass.testGlCtx( instance(mockGLCtx) );

        verify( mockGLCtx.flush() ).once();
    });
});

通过命令mocha --require ts-node/register 'test.ts' 使用 mocha 运行。

Answer 1

有两种解决方案：通用 DOM API 和通用模拟。

常见的 DOM API

正如StackOverflow answer 中所述，jsdom 可用于将 DOM API 引入 NodeJS 运行时环境。

运行npm install --save-dev jsdom global-jsdom
并将 Mocha 的命令更改为

mocha --require ts-node/register --require global-jsdom/register 'test.ts'

注意：global-jsdom 是 jsdom-global 的更新版本。

此解决方案适用于常见的 DOM API（例如HTMLElement、SVGElement、File），
但它不适用于更专业的 API（WebGL、加密、音频和视频）。

用于通用接口模拟

结果是 ts-mockito has a way to mock interfaces，包括 DOM 和任何浏览器 Web API。

所以上面的测试代码可以改成：

describe('WebGL interface', () => {
    it('works fine', () => {
        const mockGLCtx = mock<WebGL2RenderingContext>();

        TestedClass.testGlCtx( instance(mockGLCtx) );

        verify( mockGLCtx.flush() ).once();
    });
});

并且测试将成功运行。