使用 ts-mockito 模拟 WebAPI 接口

Question

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

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

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

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

以下片段说明了我正在尝试做的事情：

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 命令 mocha --require ts-node/register 'test.ts'.

Answer 1

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

对于常见的 DOM API

如本中所述，jsdom 可用于将 DOM API 引入 NodeJS 运行time 环境。

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

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

注意：global-jsdom is the newer & updated version of 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();
    });
});

测试将运行成功。

使用 ts-mockito 模拟 WebAPI 接口

Mock WebAPI interface using ts-mockito

node.js

mocha.js

webapi

ts-mockito

对于常见的 DOM API

对于通用接口模拟