使用 ts-mockito 模擬 WebAPI 接口

Question

我正在為使用瀏覽器 WebAPI 接口的 class 編寫單元測試。
我使用 ts-mockito 來模擬界面（在我的例子中是WebGL2RenderingContext ）。

當我運行測試時，Node 拋出ReferenceError: WebGL2RenderingContext is not defined這是可以理解的，因為測試是在 NodeJS 環境下運行的，而不是瀏覽器，所以類/接口不存在。

有什么方法可以讓 NodeJS 環境了解 WebAPI 接口，以便可以模擬？

注意：因為它是一個單元測試，它不應該在真正的瀏覽器上運行。
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 和通用 mocking。

對於常見的 DOM API

正如這個StackOverflow 答案中所詳述的，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、加密、音頻和視頻）。

通用接口 mocking

原來 ts-mockito有一種模擬接口的方法，包括 DOM 和任何瀏覽器 Web API。

所以上面的測試代碼可以改成：

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

        TestedClass.testGlCtx( instance(mockGLCtx) );

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

並且測試將成功運行。