Как проверить 2 асинхронных вызова с помощью jest в componentDidMount? - PullRequest
0 голосов
/ 24 сентября 2019

У меня есть такой код в componentDidMount:

async componentDidMount() {
    window.scrollTo(0, 0);
    try {
      // check if user has auto
      const { vehicles: auto } = await api.getVehicles();

      const items = auto.filter((car) => car.active);

      if (items.length) {
        this.setActiveAuto(items);
      } else {
        const { name } = await api.getCurrentMoto();

        this.setState({
          name
        });
      }
    } catch (err) {
      console.log(err);
    }
  }

Я хочу проверить правильное обновление состояния в getCurrentMoto(), поэтому я написал такой тест:

const motoResponse = {
  name: 'Honda'
};

const autoResponse = {
  vehicles: [],
};

jest.mock('../api/api.js');

describe('<Component /> Component render', () => {

  let wrapper;

  beforeEach(() => {
    api.getVehicles.mockResolvedValueOnce(autoResponse);
    api.getCurrentMoto.mockResolvedValueOnce(motoResponse);

    wrapper = shallow(<Component />);
  });



    test('correct data passed from endpoint to state in componentDidMount', () => {
      expect(wrapper.state().name).toBe('Honda');
    });


});

, номой тест не удался

Expected: "Honda"
Received: ""

Кажется, что издевательство api.getCurrentMoto.mockResolvedValueOnce(motoResponse); не вызывало, и я не могу понять, как это исправить или изменить тест, чтобы проверить правильность обновления состояния в componentDidMount

1 Ответ

0 голосов
/ 28 сентября 2019

Вот решение:

index.tsx:

import React, { Component } from 'react';
import { api } from './api';

class XComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }
  public async componentDidMount() {
    console.log('componentDidMount');
    window.scrollTo(0, 0);
    try {
      // check if user has auto
      const { vehicles: auto } = await api.getVehicles();

      const items = auto.filter(car => car.active);

      if (items.length) {
        this.setActiveAuto(items);
      } else {
        const { name } = await api.getCurrentMoto();

        this.setState({
          name
        });
      }
    } catch (err) {
      console.log(err);
    }
  }

  public setActiveAuto(items) {
    //
  }

  public render() {
    return <div>58082922</div>;
  }
}

export default XComponent;

api.ts:

export const api = {
  async getVehicles() {
    return { vehicles: [{ active: true }] };
  },

  async getCurrentMoto() {
    return { name: 'real name' };
  }
};

index.spec.tsx:

import React from 'react';
import XComponent from './';
import { api } from './api';
import { shallow } from 'enzyme';

jest.mock('./api.ts');
window.scrollTo = jest.fn();

const motoResponse = {
  name: 'Honda'
};

const autoResponse = {
  vehicles: []
};

describe('<Component /> Component render', () => {
  let wrapper;

  beforeEach(() => {
    (api.getVehicles as any).mockResolvedValueOnce(autoResponse);
    (api.getCurrentMoto as any).mockResolvedValueOnce(motoResponse);

    wrapper = shallow(<XComponent />);
  });

  test('correct data passed from endpoint to state in componentDidMount', done => {
    expect.assertions(5);
    expect(wrapper.text()).toBe('58082922');
    setImmediate(() => {
      expect(api.getVehicles).toBeCalledTimes(1);
      expect(api.getCurrentMoto).toBeCalledTimes(1);
      expect(window.scrollTo).toBeCalledWith(0, 0);
      expect(wrapper.state().name).toBe('Honda');
      done();
    });
  });
});

Результат модульного теста с отчетом о покрытии:

 PASS  src/stackoverflow/58082922/index.spec.tsx
  <Component /> Component render
    ✓ correct data passed from endpoint to state in componentDidMount (43ms)

  console.log src/stackoverflow/58082922/index.tsx:4305
    componentDidMount

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |    81.48 |       80 |       50 |    82.61 |                   |
 api.ts    |    33.33 |      100 |        0 |    33.33 |               3,7 |
 index.tsx |     87.5 |       80 |    66.67 |       90 |             21,30 |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.908s, estimated 11s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58082922

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