Jest -如何模仿RTCPeerConnection？

Question

我需要测试一个在其构造函数中初始化RTCPeerConnection对象的ES6类。如下所示：

export class MyES6Class {
  protected conn: RTCPeerConnection;

  constructor() {
    this.conn = new RTCPeerConnection();
    this.conn.onconnectionstatechange = (event: Event) => this.onConnectionStateChange();
    this.conn.onicecandidate = (event: RTCPeerConnectionIceEvent) => this.onIceCandidate(event);

  ... other stuff...
  }
}

当我尝试测试这个类时，Jest抱怨没有定义RTCPeerConnection。

现在，我查看了Jest文档here，了解如何模拟ES6类，但它只解释了如何模拟作为ES6类的依赖项，而RTCPeerConnection是浏览器的一部分(不需要导入任何模块)。

那么，模拟RTCPeerConnection的正确方式是什么呢？

Answer 1

这是一个单元测试解决方案：

index.ts

export class MyES6Class {
  protected conn: RTCPeerConnection;

  constructor() {
    this.conn = new RTCPeerConnection();
    this.conn.onconnectionstatechange = (event: Event) => this.onConnectionStateChange();
    this.conn.onicecandidate = (event: RTCPeerConnectionIceEvent) => this.onIceCandidate(event);
  }

  private onConnectionStateChange() {
    console.log('onConnectionStateChange');
  }

  private onIceCandidate(event: RTCPeerConnectionIceEvent) {
    console.log('onIceCandidate');
  }
}

index.test.ts

import { MyES6Class } from './';

describe('63011230', () => {
  it('should pass', () => {
    class TestMyES6Class extends MyES6Class {
      public testonconnectionstatechange(event) {
        this.conn.onconnectionstatechange!(event);
      }
      public testonicecandidate(event: RTCPeerConnectionIceEvent) {
        this.conn.onicecandidate!(event);
      }
    }
    const logSpy = jest.spyOn(console, 'log');
    (global as any).RTCPeerConnection = jest.fn();
    const instance = new TestMyES6Class();
    instance.testonconnectionstatechange({} as Event);
    instance.testonicecandidate({} as RTCPeerConnectionIceEvent);
    expect((global as any).RTCPeerConnection).toBeCalledTimes(1);
    expect(logSpy).toBeCalledWith('onConnectionStateChange');
    expect(logSpy).toBeCalledWith('onIceCandidate');
  });
});

100%覆盖率的单元测试结果：

 PASS  stackoverflow/63011230/index.test.ts (15.4s)
  63011230
    ✓ should pass (23ms)

  console.log
    onConnectionStateChange

      at CustomConsole.<anonymous> (node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866:25)

  console.log
    onIceCandidate

      at CustomConsole.<anonymous> (node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866:25)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 index.ts |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.405s

jest.config.js

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'node',
  setupFilesAfterEnv: [
    './jest.setup.js',
  ],
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
  verbose: true,
};

源代码：https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/63011230