Test an asynchronous action with thunk and jest

Question

I can't test an asynchronous action that works with thunk, could one tell me what I'm doing wrong or how could I do it?

File containing the action I want to test: 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,
});

File containing the tests I want to perform: 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);
    });
  });
});

The console outputs the following:

 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"] },

I have tried increasing the timeout to 30000 and the test keeps failing.

I hope you can help me!

Answer 1

I have made the test pass but I am not sure if I am doing it correctly, could someone tell me if it is well done? Thank you!

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