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.