Hector Yeomans Blog

Typescript, Jest and Axios

November 03, 2019

I found different posts that tell you how to mock Axios using Jest & Typescript. The only difference in this post is that, when I use Axios, I like to use it as a function rather than calling axios.get or axios.post.

Imagine you have this Axios request that you want to mock in your tests:

//src/index.ts
import axios from "axios";

export interface Post {
 userId: number;
 id: number;
 title: string;
 body: string;
}

const DummyRequest = (id: number): Promise<Post> => {
 return axios({
 method: "GET",
 url: `https://jsonplaceholder.typicode.com/posts/${id}`
 }).then(response => {
 return { ...response.data };
 });
};

export default DummyRequest;

Install jest and jest-ts and initialize jest-ts

>npm i -D ts-jest jest
>npx ts-jest config:init

This last command will create a jest.config.js file:

//jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
}

In your tsconfig.json file, make sure that your tests are excluded from the compiler:

//tsconfig.json
...
"exclude": [
      "test/**/*" <--Add this to your exclude array
 ],
...

Now we can create a test for our DummyRequest.ts, create this file under test/index.test.ts:

import axios, { AxiosResponse } from "axios";
import DummyRequest from "../src";
import { mocked } from "ts-jest/dist/util/testing"; //<-- This allows to mock results

jest.mock("axios"); //This is needed to allow jest to modify axios at runtime

it("returns a post", async () => {
  //Arrange
  const axiosResponse: AxiosResponse = {
    data: {
    userId: 1,
    id: 1,
    title:
    "sunt aut facere repellat provident occaecati excepturi optioreprehenderit",
    body:
    "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    status: 200,
    statusText: "OK",
    config: {},
    headers: {}
  };

  mocked(axios).mockResolvedValue(axiosResponse); //Mocking axios function rather than a method
  
  //Act
  const result = await DummyRequest(1);

  //Assert
  expect(result).toBe({
    userId: 1,
    id: 1,
    title:
    "sunt aut facere repellat provident occaecati excepturi optioreprehenderit",
    body:
    "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  });
});

Now you can mock the whole Axios function rather than specific methods.

Written by Hector Yeomans who lives in Mexico and works remotely for Invision. Follow him on Twitter, or add him on LinkedIn.