javascript - Why does mocked axios get method return undefined? - Stack Overflow

admin管理员组

文章数量:1340297

I've written a fairly simple async method that retrieves results over HTTP:

import axios from "axios";

const BASE_URI = "";

export const getSearchShows = async (search: string) => {
  const uri = `${BASE_URI}/search/shows?q=${encodeURIComponent(search)}`;
  const response = await axios.get(uri);

  return response.data;
};

I want to unit-test it. So I write the following Jest test, which intends to mocks axios and return fake results, which I can then assert on:

import axios from "axios";

import fakeSearchShowsResponse from "../data/search-shows--q=test.json";

import { getSearchShows } from "./TvShows.http";

jest.mock("axios");

describe("TvShows.http", () => {
  describe("getSearchShows", () => {
    it("retrieves shows over http and correctly deserializes them", async () => {

      const mockAxiosGet = jest.spyOn(axios, "get");

      mockAxiosGet.mockImplementation(async () => fakeSearchShowsResponse);

      const shows = await getSearchShows("test");

      console.log(mockAxiosGet.mock.calls);

      expect(shows[0].id).toEqual(139);

    });
  });
});

I expected that, due to calling jest.mock("axios"), the axios get method would have been replaced with a mocked Jest method.

Furthermore, I expected that due to calling mockAxiosGet.mockImplementation and passing it a function, a call to the axios get method would actually call my mock function, allowing me to substitute test data for real data.

What actually happens is that the call to axios get returns undefined, causing my test assertion to fail.

And yet, oddly enough, the Jest spy still registers that the method was called – the console.log outputs a single call.

So why is this supposedly mocked method returning undefined when I explicitly provided a mock implementation that returns a value?

Or do I misunderstand how mockImplementation is meant to be used?

I've written a fairly simple async method that retrieves results over HTTP:

import axios from "axios";

const BASE_URI = "http://api.tvmaze.";

export const getSearchShows = async (search: string) => {
  const uri = `${BASE_URI}/search/shows?q=${encodeURIComponent(search)}`;
  const response = await axios.get(uri);

  return response.data;
};

I want to unit-test it. So I write the following Jest test, which intends to mocks axios and return fake results, which I can then assert on:

import axios from "axios";

import fakeSearchShowsResponse from "../data/search-shows--q=test.json";

import { getSearchShows } from "./TvShows.http";

jest.mock("axios");

describe("TvShows.http", () => {
  describe("getSearchShows", () => {
    it("retrieves shows over http and correctly deserializes them", async () => {

      const mockAxiosGet = jest.spyOn(axios, "get");

      mockAxiosGet.mockImplementation(async () => fakeSearchShowsResponse);

      const shows = await getSearchShows("test");

      console.log(mockAxiosGet.mock.calls);

      expect(shows[0].id).toEqual(139);

    });
  });
});

I expected that, due to calling jest.mock("axios"), the axios get method would have been replaced with a mocked Jest method.

Furthermore, I expected that due to calling mockAxiosGet.mockImplementation and passing it a function, a call to the axios get method would actually call my mock function, allowing me to substitute test data for real data.

What actually happens is that the call to axios get returns undefined, causing my test assertion to fail.

And yet, oddly enough, the Jest spy still registers that the method was called – the console.log outputs a single call.

So why is this supposedly mocked method returning undefined when I explicitly provided a mock implementation that returns a value?

Or do I misunderstand how mockImplementation is meant to be used?

• javascript
• reactjs
• unit-testing
• jestjs
• axios

Share Improve this question Follow edited Sep 6, 2019 at 6:11 Jonathan asked Sep 6, 2019 at 5:55 JonathanJonathan 32.9k4040 gold badges143143 silver badges209209 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

So after some experimentation, it would appear that the jest.mock("axios") call was interfering with the jest.spyOn(axios, "get"); call.

After removing the jest.mock call, it now returns my mocked value from the jest.spyOn call.

I think this might be because the jest.mock call was hoisted, whereas the jest.spyOn call wasn't. So the module under test was going off the hoisted mock rather than the un-hoisted one.

jest.mock('axios') would mock the entire module, replacing everything with a stub. So it doesn't necessarily have relation with the fact that jest.mock() is hoisted, it is only to make sure dependency is mocked before import. It's just the stub returning undefined.

Meanwhile, you could

import axios from 'axios';

jest.mock('axios');

console.log(axios); // mocked

describe('suite', () => {
  it('test', () => {
    axios.get.mockResolvedValue('{"test": "test"}');
    // --------------------------^
    // you class would get this when calling axios.get()

    // you could also do some assertion with the mock function
    expect(axios.get).toHaveBeenCalledTimes(1);
    expect(axios.get).toHaveBeenCallWith('http://some-url');
  });
});

本文标签： javascriptWhy does mocked axios get method return undefinedStack Overflow