Reprinted address

React 16 Jest ES6 Class Mocks (simulation using ES6 grammar class) Example 2

Project Initialization

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 (simulation using ES6 grammar classes)

Jest can be used to simulate ES6 syntax classes imported into files to be tested.

The class of ES6 grammar is a constructor with some grammatical sugars. Therefore, any simulation of ES6 grammar classes must be a function or an actual ES6 grammar class (which is another function).
So you can use simulation functions to simulate them. as follows

Examples of class testing for ES6 grammar II, using the second approach today - Manual mock

Examples of ES6 grammar classes

I use the official examples here, the SoundPlayer class and the SoundPlayerConsumer consumer class. Refer to the previous article for the contents of the following documents React 16 Jest ES6 Class Mocks (simulation using ES6 grammar classes)src/lib/sound-player.js

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

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

  playSoundFile() {
    console.log('The playing file is:', 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();
  }
}

Manual simulation is created by creating a simulation implementation in the _mocks_ folder.
This can be specified for implementation and can be used through test files. as follows
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;

Then the mock and mock methods are imported into the test cases, as follows

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

jest.mock('../lib/sound-player'); // SoundPlayer is now an analog constructor

beforeEach(() => {
  // Clear all instances and call constructors and all methods:
  SoundPlayer.mockClear();
  mockChoicePlaySoundFile.mockClear();
});

it('We can check it. SoundPlayerConsumer Whether a class constructor has been invoked', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('We can check it. SoundPlayerConsumer Whether a method is invoked on a class instance', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.play();
  expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

The results are as follows.

 PASS  src/__tests__/jest_sound_player_2.test.js
  ✓ We can check it. SoundPlayerConsumer Whether a class constructor has been invoked (7ms)
  ✓ We can check it. SoundPlayerConsumer Whether a method is invoked on a class instance (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.

Next time, introduce the third and fourth methods - call jest.mock()(Calling jest.mock() with the module factory parameter) and replace mock(Replacing the mock using mock implementation () or mock Implementation Once ()) with mock implementation ().

Practice Project Address

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