Question

我无法测试适用于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，并且测试一直失败。

希望你能帮助我！

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

使用thunk和jest测试异步操作

1 个答案: