使用thunk和jest测试异步操作

问题描述

我无法测试适用于thunk的异步操作，有人可以告诉我我做错了什么或者我怎么做？

包含要测试的操作的文件： technology.js（操作）

import { types } from "../types/types";
import swal from "sweetalert";

export const startFetchTechnologies = () => {
  return async (dispatch) => {
    try {
      dispatch(startLoading());
      const res = await fetch(
        "http://url.com/techs"
      );
      const data = await res.json();
      dispatch(loadTechnologies(data));
    } catch (error) {
      await swal("Error","An error has occurred","error");
    }
    dispatch(finishLoading());
  };
};
    
export const loadTechnologies = (data) => ({
  type: types.loadTechnologies,payload: data,});

export const startLoading = () => ({
  type: types.startLoadTechnologies,});


export const finishLoading = () => ({
  type: types.endLoadTechnologies,});

包含要执行的测试的文件： technology.test.js（测试）

import { startFetchTechnologies } from "../../actions/technology";
import { types } from "../../types/types";

import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import fetchMock from "fetch-mock";
import expect from "expect"; // You can use any testing library

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe("startFetchTechnologies",() => {
  afterEach(() => {
    fetchMock.restore();
  });

  beforeEach(() => {
    jest.setTimeout(10000);
  });

  test("startFetchTechnologies",() => {

    // fetchMock.getonce("/todos",{
    //   body: { todos: ["do something"] },//   headers: { "content-type": "application/json" },// });

    const expectedActions = [
      { type: types.startLoadTechnologies },{ type: types.loadTechnologies,payload: "asd" },{ type: types.endLoadTechnologies },];
    const store = mockStore({});

    return store.dispatch(startFetchTechnologies()).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

控制台输出以下内容：

 FAIL  src/__test__/actions/technology.test.js (11.407 s)
  startFetchTechnologies
    ✕ startFetchTechnologies (10029 ms)

  ● startFetchTechnologies › startFetchTechnologies

    : Timeout - Async callback was not invoked within the 10000 ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 10000 ms timeout specified by jest.setTimeout.Error:

      19 |   });
      20 | 
    > 21 |   test("startFetchTechnologies",() => {
         |   ^
      22 | 
      23 |     // fetchMock.getonce("/todos",{
      24 |     //   body: { todos: ["do something"] },

我尝试将超时时间增加到30000，并且测试一直失败。

希望你能帮助我！

解决方法

我已经通过了测试，但是我不确定自己做得是否正确，有人可以告诉我它做得好吗？ 谢谢！

import { startFetchTechnologies } from "../../actions/technology";
import { types } from "../../types/types";

import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import fetchMock from "fetch-mock";
import expect from "expect"; // You can use any testing library

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe("startFetchTechnologies",() => {

  beforeEach(() => {
    // jest.setTimeout(10000);
  });

  afterEach(() => {
    fetchMock.restore();
  });


  test("startFetchTechnologies",() => {

    fetchMock.getOnce("https://url.com/tech",{
      body: { payload: ['asd'] },headers: { "content-type": "application/json" },});

    const expectedActions = [
      { type: types.startLoadTechnologies },{ type: types.loadTechnologies,payload: {payload: ['asd']} },{ type: types.endLoadTechnologies },];
    const store = mockStore({});

    return store.dispatch(startFetchTechnologies()).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});