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
});

模拟API调用时如何设置状态

1 个答案:

问题

解决方案