Question

我需要测试一个ES6类，该类将在其构造函数内初始化RTCPeerConnection对象。像这样：

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。

现在，我已经查看了有关如何模拟ES6类的Jest文档here，但仅说明了如何模拟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

开玩笑-如何模拟RTCPeerConnection？

1 个答案: