Как установить состояние при издевательстве над вызовом API

Question

Я стараюсь изо всех сил понять, как имитировать вызовы API, и я понял, что вам нужно имитировать их, используя jest.fn().mockImplementation():

Но теперь мне нужно запустить этот код и установить свойствав состояние, чтобы я мог убедиться, что вызов обновил количество второго элемента до трех.

api.getCart = jest.fn().mockImplementation(() => Promise.resolve({
    cart: mockCart,
    items: [{}, { qty: 3 }, {}],
}));

, поэтому в своем тесте я проверил, что вышеприведенное называется так, как оно есть.

Я бы ожидал, что это затем установит состояние в моей компонентной функции, как это то, что я делаю ниже:

  /**
  * Fetchs the carts data.
  * Includes: Items, Totals and options.
  */
  getCartData() {
    const callCart = getCart(this.token);

    callCart.then((response) => {
      this.setState({
       cart: response,
       items: response.items,
      });
    });
  }

В моем тесте я хочу написать нижетак что тест равен 3 вместо 2 (исходное значение).

expect(renderedCart.state().items[1].qty).toEqual(3);

Answer 1

выпуск

Ты рядом.expect завершается ошибкой до того, как обратные вызовы then имеют шанс на запуск.

Решение

Возвращает Promise, созданное с помощью callCart.then в getCartData и await в Promise в вашем тесте.Это позволит выполнить все обратные вызовы then и изменить состояние до выполнения expect.

Вот упрощенный рабочий пример, основанный на фрагментах кода выше:

---

api.js

export const getCart = () => Promise.resolve(1);

---

code.js

import * as React from 'react';
import { getCart } from './api';

export class Comp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { qty: 2 };
  }
  getCartData() {
    const callCart = getCart(this.token);

    return callCart.then((response) => {   // return the Promise
      this.setState({
        qty: response
      });
    });
  }
  render() { return null; }
}

---

code.test.js

import * as React from 'react';
import { shallow } from 'enzyme';

import * as api from './api';
import { Comp } from './code';

test('Comp', async () => {   // make the test async
  api.getCart = jest.fn().mockImplementation(() => Promise.resolve(3));

  const renderedCart = shallow(<Comp/>);
  await renderedCart.instance().getCartData();   // await the Promise
  expect(renderedCart.state().qty).toEqual(3);   // SUCCESS
});