轉(zhuǎn)載地址

React 16 Jest ES6 Class Mocks(使用ES6語(yǔ)法類(lèi)的模擬) 實(shí)例二

項(xiàng)目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.30
npm install

ES6 Class Mocks(使用ES6語(yǔ)法類(lèi)的模擬)

Jest可用于模擬導(dǎo)入到要測(cè)試的文件中的ES6語(yǔ)法的類(lèi)。

ES6語(yǔ)法的類(lèi)是具有一些語(yǔ)法糖的構(gòu)造函數(shù)。因此，ES6語(yǔ)法的類(lèi)的任何模擬都必須是函數(shù)或?qū)嶋H的ES6語(yǔ)法的類(lèi)(這也是另一個(gè)函數(shù))。
所以可以使用模擬函數(shù)來(lái)模擬它們。如下

ES6語(yǔ)法的類(lèi)測(cè)試實(shí)例二，今天使用第二種方式 - 手動(dòng)模擬(Manual mock)

ES6語(yǔ)法類(lèi)的實(shí)例

這里的實(shí)例我使用官方的例子，SoundPlayer類(lèi)和SoundPlayerConsumer消費(fèi)者類(lèi)。下面部分文件的內(nèi)容參考上篇文章React 16 Jest ES6 Class Mocks(使用ES6語(yǔ)法類(lèi)的模擬)src/lib/sound-player.js

export default class SoundPlayer {
  constructor() {
    this.name = 'Player1';
    this.fileName = '';
  }

  choicePlaySoundFile(fileName) {
    this.fileName = fileName;
  }

  playSoundFile() {
    console.log('播放的文件是:', this.fileName);
  }
}

src/lib/sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
  constructor() {
    this.soundPlayer = new SoundPlayer();
  }

  play() {
    const coolSoundFileName = 'song.mp3';
    this.soundPlayer.choicePlaySoundFile(coolSoundFileName);
    this.soundPlayer.playSoundFile();
  }
}

通過(guò)在mocks文件夾中創(chuàng)建一個(gè)模擬實(shí)現(xiàn)來(lái)創(chuàng)建手動(dòng)模擬。
這個(gè)可以指定實(shí)現(xiàn)，并且可以通過(guò)測(cè)試文件使用它。如下
src/lib/mocks/sound-player.js

export const mockChoicePlaySoundFile = jest.fn();
const mockPlaySoundFile = jest.fn();

const mock = jest.fn().mockImplementation(() => {
  const data = {
    choicePlaySoundFile: mockChoicePlaySoundFile,
    playSoundFile: mockPlaySoundFile,
  };

  return data;
});

export default mock;

然后在測(cè)試用例中導(dǎo)入mock和mock方法，具體如下

import SoundPlayer, { mockChoicePlaySoundFile } from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 現(xiàn)在是一個(gè)模擬構(gòu)造函數(shù)

beforeEach(() => {
  // 清除所有實(shí)例并調(diào)用構(gòu)造函數(shù)和所有方法：
  SoundPlayer.mockClear();
  mockChoicePlaySoundFile.mockClear();
});

it('我們可以檢查SoundPlayerConsumer是否調(diào)用了類(lèi)構(gòu)造函數(shù)', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('我們可以檢查SoundPlayerConsumer是否在類(lèi)實(shí)例上調(diào)用了一個(gè)方法', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.play();
  expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

運(yùn)行后得到的結(jié)果如下

 PASS  src/__tests__/jest_sound_player_2.test.js
  ? 我們可以檢查SoundPlayerConsumer是否調(diào)用了類(lèi)構(gòu)造函數(shù) (7ms)
  ? 我們可以檢查SoundPlayerConsumer是否在類(lèi)實(shí)例上調(diào)用了一個(gè)方法 (2ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.352s
Ran all test suites matching /src\/__tests__\/jest_sound_player_2.test.js/i.

下次介紹第三、四種方法 - 使用模塊工廠(chǎng)參數(shù)調(diào)用jest.mock()(Calling jest.mock() with the module factory parameter)和使用mockImplementation()或mockImplementationOnce()替換mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

實(shí)踐項(xiàng)目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.31