Как проверить функцию init () в jest, которая вызывается из конструктора, а затем вызывает другие функции asyn c - PullRequest
0 голосов
/ 10 февраля 2020

У меня есть следующий код в javascript:

class SampleClass {
  constructor(param1) {
    this.param1 = param1;
    this.init();
  }
  async init() {
    await this.getData();
    this.loadIframe();
  }
  async getData() {
    const response = fetch(url);
    const data = response.json();
    //set the response to class variable
    this.param2 = data;
  }
  loadIframe() {
    //some logic to load iframe.
  }
}

Как лучше всего проверить это с помощью jest?

В настоящее время я тестирую конструктор logi c высмеивая функцию init ().

Но Я также должен проверить функцию getData () . Какой должен быть подход для тестирования метода getData ().

Я пытался протестировать функцию getData () , не насмехаясь над функцией init () и используя asyn c testing , но Я не уверен , где использовать ожидание в тесте , поскольку функция вложена и вызывается изнутри init, который вызывается из конструктора.

it('should fetch data', async()=>{
   //some logic  
})

1 Ответ

1 голос
/ 10 февраля 2020

Вы можете использовать jest.spyOn (object, methodName) , чтобы высмеивать ваши методы SampleClass. Моя тестовая среда - node, поэтому я имитирую fetch метод для global объекта. Если среда тестирования browser, метод fetch используется для объекта window.

Например:

sampleClass.js:

class SampleClass {
  constructor(param1) {
    this.param1 = param1;
    this.init();
  }
  async init() {
    await this.getData();
    this.loadIframe();
  }
  async getData() {
    const url = 'https://stackoverflow.com/';
    const response = fetch(url);
    const data = response.json();
    this.param2 = data;
  }
  loadIframe() {}
}

export { SampleClass };

sampleClass.test.js :

import { SampleClass } from './sampleClass';

describe('60146073', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  describe('#constructor', () => {
    it('should consturt', () => {
      jest.spyOn(SampleClass.prototype, 'constructor');
      jest.spyOn(SampleClass.prototype, 'init').mockReturnValueOnce();
      const instance = new SampleClass('param1');
      expect(instance.param1).toBe('param1');
      expect(instance.init).toBeCalledTimes(1);
    });
  });
  describe('#init', () => {
    it('should init', async () => {
      jest.spyOn(SampleClass.prototype, 'getData').mockResolvedValueOnce();
      jest.spyOn(SampleClass.prototype, 'loadIframe').mockReturnValueOnce();
      jest.spyOn(SampleClass.prototype, 'init').mockReturnValueOnce();
      const instance = new SampleClass();
      await instance.init();
      expect(instance.getData).toBeCalledTimes(1);
      expect(instance.loadIframe).toBeCalledTimes(1);
    });
  });

  describe('#getData', () => {
    it('should fetch data', async () => {
      const mResponse = { json: jest.fn().mockReturnValueOnce({}) };
      global.fetch = jest.fn().mockResolvedValueOnce(mResponse);
      jest.spyOn(SampleClass.prototype, 'init').mockReturnValueOnce();
      const instance = new SampleClass();
      await instance.getData();
      expect(global.fetch).toBeCalledWith('https://stackoverflow.com/');
      expect(mResponse.json).toBeCalledTimes(1);
    });
  });
});

Результаты модульных испытаний со 100% покрытием:

 PASS  stackoverflow/60146073/sampleClass.test.js
  60146073
    #constructor
      ✓ should consturt (3ms)
    #init
      ✓ should init (2ms)
    #getData
      ✓ should fetch data (2ms)

----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------|---------|----------|---------|---------|-------------------
All files       |     100 |      100 |      80 |     100 |                   
 sampleClass.js |     100 |      100 |      80 |     100 |                   
----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        4.137s, estimated 5s

Исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60146073

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...