使用 thunk 和 jest 测试异步操作答案

【问题标题】：Test an asynchronous action with thunk and jest使用 thunk 和 jest 测试异步操作
【发布时间】：2020-10-02 05:24:12
【问题描述】：

我无法测试与 thunk 一起使用的异步操作，谁能告诉我我做错了什么或者我该怎么做？

包含我要测试的操作的文件：technology.js (action)

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 (test)

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，但测试一直失败。

希望你能帮帮我！

【问题讨论】：

标签： reactjs testing redux jestjs thunk

【解决方案1】：

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

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

【讨论】：