javascript - 如何创建具有动态返回值的 jest 模拟实现

Question

我在我的 mobx 商店中定义了一个操作，如下所示:

// CardsStore.js

import FetchData from './FetchData';

export default class CardsStore {

  @observable cards = [];

  @action fetchCards = async () => {
    try {
      this.cards = await FetchData();
    } catch (error) {
      // handling error
    }
  };

  ...
  other actions and computed values
  ...
}

这是 FetchData 的实现:

import EndpointService from 'app/services/EndpointService';

const endpointService = new EndpointService();

export default async function fetchData() {
  try {
      return await endpointService.getCards();
    } catch (e) {
    return 'caught';
  }
}

我在 __ mocks __ 文件夹内为 FetchData 创建了一个模拟模块，它不是调用端点服务而是返回一个硬编码数组，如下所示:

// ./__mocks__/FetchData.js

const cards = [
  {
    id: 'some-id-1',
    name: 'Test1',
  },
  {
    id: 'some-id-2',
    name: 'Test2',
  },
];

export default function FetchData() {
  return new Promise((resolve, reject) => {
  process.nextTick(() =>
  cards ? resolve(cards) : reject({ error: 'Cards are not found.' })
   );
 });
}

在我的 cards.test.js 文件中，我像这样测试它并且它有效:

import CardsStore from './CardsStore.js';

jest.mock('./FetchData');

const cards = [
  {
    id: 'some-id-1',
    name: 'Test1',
  },
  {
    id: 'some-id-2',
    name: 'Test2',
  },
];

describe('when fetch cards is called', () => {

  const cardsStore = new CardsStore();

  it('should load the cards', async () => {
    await cardsStore.fetchCards();
    expect(cardsStore.cards).toEqual(cards);
  });
});

问题是，如果我想测试我的其他操作 addNewCard 那么我需要动态更改卡片并添加新卡片，然后检查预期的卡片列表是否等于新的卡片一张(应包含 3 张卡片)

我找不到动态更新 ./__mocks__/FetchData.js 内的卡片数组的方法

Answer 1

使用jest.spyOn和mockReturnValue...

jest.spyOn(cardsStore.prototype, "fetchCards").mockReturnValue(Promise.resolve(obj));

将 obj 替换为您想要返回的内容

示例，

describe('when fetch cards is called', () => {

  const cardsStore = new CardsStore();

  it('should load the cards', async () => {
    jest.spyOn(cardsStore.prototype, "fetchCards").mockReturnValue(Promise.resolve(obj));
    await cardsStore.fetchCards();
    expect(cardsStore.cards).toEqual(cards);
  });
});