Reactjs Jest异步API模拟

我在stack overflow上搜索了这个问题，但找不到任何类似于我的用例

我有这样的容器组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// API
import BookingAPI from '../../../../api/BookingAPI';

class CustomerProfilePage extends Component {
  state = {
    list: [],
    totalRecords: 0,
    pageNo: 1,
  };

  componentDidMount() {
    const { pageNo } = this.state;
    this.onGetBookingList({ pageNo });
  }

  onGetBookingList = async ({ pageNo = 0 }) => {
    const { match } = this.props;
    try {
      const result = await BookingAPI.onGetBookingList({
        passengerId: match.params.customerId,
        sortProperties: ['id'],
        limitCount: 10,
        pageNo,
      });
      this.setState({
        list: result.items,
        totalRecords: result.totalRecords,
     });
    } catch (error) {
      // console.log('error is', error);
    }
  };

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

export default CustomerProfilePage;

---

为了简单起见，我没有在我的

render

中编写代码，因为我想把重点放在模拟API调用的代码部分。

因为

onGetBookingList

必须是一个异步函数

您可以这样定义异步方法：

jest.mock('../../../../api/BookingAPI', () => ({
    async onGetBookingList() {
        return data;
    }
}));

或者您可以使用jest.fn（）重新声明一个承诺

jest.mock('../../../../api/BookingAPI', () => ({
    onGetBookingList: jest.fn(() => Promise.resolve(data))
}));

或者使用jest.fn（）.mockResolvedValue（）

然后

import { onGetBookingList } from '../../../../api/BookingAPI';

it('should be working with all of the above mocks', async () => {
    const { totalRecords } = await onGetBookingList();
    expect(totalRecords).toBe(1);
}

---

因为

onGetBookingList

必须是一个异步函数

您可以这样定义异步方法：

jest.mock('../../../../api/BookingAPI', () => ({
    async onGetBookingList() {
        return data;
    }
}));

或者您可以使用jest.fn（）重新声明一个承诺

jest.mock('../../../../api/BookingAPI', () => ({
    onGetBookingList: jest.fn(() => Promise.resolve(data))
}));

或者使用jest.fn（）.mockResolvedValue（）

然后

import { onGetBookingList } from '../../../../api/BookingAPI';

it('should be working with all of the above mocks', async () => {
    const { totalRecords } = await onGetBookingList();
    expect(totalRecords).toBe(1);
}

---

谢谢，有没有一种方法可以让我在test中调用

this.onGetBookingList

，并从该函数中测试

BookingAPI.onGetBookingList

方法，而不是直接测试它。另外，如果我直接测试它，我的代码覆盖率会像这样被覆盖吗？上面的测试证明模拟是有效的。你不需要直接测试它。它应该由您正在测试的实现调用，因为它依赖于

BookingAPI

我知道，这一直困扰着我。您的测试工作正常，但我的覆盖率仍然不是100%，因为jest没有覆盖

此中的行。onGetBookingList

我可以像这样测试每个API，但我的代码仍然没有覆盖这些方法。jest的覆盖率报告工作正常，可能您应该问一个新问题，谢谢你的支持。谢谢你，有没有办法在我的测试中调用

this.onGetBookingList

，并从该函数中测试

BookingAPI.onGetBookingList

方法，而不是直接测试它。另外，如果我直接测试它，我的代码覆盖率会像这样被覆盖吗？上面的测试证明模拟是有效的。你不需要直接测试它。它应该由您正在测试的实现调用，因为它依赖于

BookingAPI

我知道，这一直困扰着我。您的测试工作正常，但我的覆盖率仍然不是100%，因为jest没有覆盖

此中的行。onGetBookingList

我可以像这样测试每个API，但我的代码仍然没有覆盖这些方法。jest的覆盖率报告工作正常，可能您应该问一个新问题，这是离题的。谢谢你的支持。