这些 Jest 测试的顺序如何影响测试结果？

Question

I cannot figure out why the order of these jest tests affects the test outcome.

This order allows all of the tests to pass:

import $axios from "@/services/backend-service";
import actions from "@/store/modules/transactions/actions";

describe("store/modules/transactions/actions", () => {
  let state;
  let postSpy;
  beforeEach(() => {
    state = {
      commit: jest.fn(),
    };
    postSpy = jest.spyOn($axios, "post");
  });

  it("starts uploading transactions", async () => {
    postSpy.mockImplementationOnce(() => {
      return Promise.resolve();
    });

    await actions.uploadTransactions(state, { file: "arbitrary filename" });
    $axios.interceptors.request.handlers[0].fulfilled();

    expect(state.commit).toHaveBeenCalledWith("changeUploadStatusToUploading");
  });

  it("succeeds uploading transactions", async () => {
    postSpy.mockImplementationOnce(() => {
      return Promise.resolve();
    });

    await actions.uploadTransactions(state, { file: "arbitrary filename" });

    expect(state.commit).toHaveBeenCalledWith("changeUploadStatusToSucceeded");
  });
});

This order:

import $axios from "@/services/backend-service";
import actions from "@/store/modules/transactions/actions";

describe("store/modules/transactions/actions", () => {
  let state;
  let postSpy;
  beforeEach(() => {
    state = {
      commit: jest.fn(),
    };
    postSpy = jest.spyOn($axios, "post");
  });

  it("succeeds uploading transactions", async () => {
    postSpy.mockImplementationOnce(() => {
      return Promise.resolve();
    });

    await actions.uploadTransactions(state, { file: "arbitrary filename" });

    expect(state.commit).toHaveBeenCalledWith("changeUploadStatusToSucceeded");
  });

  it("starts uploading transactions", async () => {
    postSpy.mockImplementationOnce(() => {
      return Promise.resolve();
    });

    await actions.uploadTransactions(state, { file: "arbitrary filename" });
    $axios.interceptors.request.handlers[0].fulfilled();

    expect(state.commit).toHaveBeenCalledWith("changeUploadStatusToUploading");
  });
});

causes this error:

  ● store/modules/transactions/actions › starts uploading transactions

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "changeUploadStatusToUploading"
    Received: "changeUploadStatusToSucceeded"

    Number of calls: 1

      29 |     $axios.interceptors.request.handlers[0].fulfilled();
      30 |
    > 31 |     expect(state.commit).toHaveBeenCalledWith("changeUploadStatusToUploading");
         |                          ^
      32 |   });
      33 |
      34 |

      at Object.<anonymous> (tests/unit/store/modules/transactions/actions.spec.js:31:26)

I suspect it has to do with hoisting and this thread: https://github.com/facebook/jest/issues/2582

But have not been able to wrap my head around it.

Thank you for your time and help

Below are the other bit of code that might be relevant:
actions.js :

import $axios from "@/services/backend-service";

const RESOURCE_NAME = "transaction";
const RESOURCE_PATH = `${RESOURCE_NAME}s`;

export const actions = {
  uploadTransactions(state, payload) {
    let formData = new FormData();
    formData.append("account_id", 1); // change to get dynamically when ready
    formData.append("file", payload["file"]);

    $axios.interceptors.request.use(function (config) {
      state.commit("changeUploadStatusToUploading");
      return config;
    });

    return $axios
      .post(`${RESOURCE_PATH}/batch_upload/`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then(() => {
        state.commit("changeUploadStatusToSucceeded");
      })
      .catch(function (error) {
        state.commit("changeUploadStatusToFailed");
      });
  },
};

export default actions;

backend-service.js :

import axios from "axios";

const API_BASE_URL =
  `${process.env["VUE_APP_BACKEND_SCHEME"]}` +
  `://` +
  `${process.env["VUE_APP_BACKEND_HOST"]}` +
  `:` +
  `${process.env["VUE_APP_BACKEND_PORT"]}` +
  `/` +
  `${process.env["VUE_APP_BACKEND_PATH_PREFIX"]}`;

const $axios = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    "Content-Type": "application/vnd.api+json",
  },
});

export default $axios;

Answer 1

In the case where all tests pass, you have invoked the interceptors yourself in the very first test, so following things happened in the given order:

(1) state.commit --> calledWith --> changeUploadStatusToUploading

(2) Manually invoked interceptor

(3) Interceptor execution finished successfully

(3) Response finished successfully

(4) state.commit --> calledWith --> changeUploadStatusToSucceeded

In the case where tests fail, the first test didn't invoke interceptors, so following things happened:

(1) state.commit --> calledWith --> changeUploadStatusToUploading

(2) interceptor not invoked

(3) response hasn't ended yet

(4) State.commit wasn't called anymore since interceptor needs to be resolved first