Jest Vue Expected mock function to have been called with, but not called

Question

I am trying to mock an api call using Jest and Vue but I get the error "Expected mock function to have been called with: ... but not called"

I have tried to find a solution but haven't found anything yet.

import DocumentService from "../../src/services/document";
import mockedData from "../__mockData__/documents";
import axios from "axios";

it("should call Document Service and  download a document", () => {
  let catchFn = jest.fn(),
    thenFn = jest.fn();

  DocumentService.downloadDocumentById(jwtToken, DocumentURL, id)
    .then(thenFn)
    .then(catchFn);

  // expect(axios.get).toHaveBeenCalledWith(DocumentURL + "/" + id + "/content", {
  //     headers: { Authorization: "Bearer " + jwtToken, "X-role": "SuperUser" }
  // });

  expect(axios.get).toHaveBeenCalledWith(DocumentURL);

  let responseObj = { data: mockedData };
  axios.get.Mockresponse(responseObj);
  expect(thenFn).toHaveBeenCalledWith(mockedData);
  expect(catchFn).not.toHaveBeenCalled();
});

Brian Adams Brian Adams · Accepted Answer · 2019-02-09T03:02:17

The test runs synchronously and the expect runs and fails before the Promise callbacks have a chance to run.

Make sure you await the Promise returned by DocumentService.downloadDocumentById to give the callbacks a chance to run:

it("should call Document Service and  download a document", async () => {  // use an async test function
  let catchFn = jest.fn(),
    thenFn = jest.fn();

  const promise = DocumentService.downloadDocumentById(jwtToken, DocumentURL, id)
    .then(thenFn)
    .then(catchFn);  // remember the Promise

  expect(axios.get).toHaveBeenCalledWith(DocumentURL);

  let responseObj = { data: mockedData };
  axios.get.Mockresponse(responseObj);
  await promise;  // wait for the Promise
  expect(thenFn).toHaveBeenCalledWith(mockedData);  // SUCCESS
  expect(catchFn).not.toHaveBeenCalled();  // SUCCESS
});

Jest Vue Expected mock function to have been called with, but not called

2 Answers