I'm trying to test the below axios request written for both put/post as a config option:
export function saveCourse(course){
const config = {
method: course.id ? 'PUT' : 'POST',// POST for create, PUT to update when id already exists.
url: baseUrl + (course.id || ''),
headers: { "content-type": "application/json" },
data: course
}
return axios(config)
.then((res) => {
if(res.status === 201 || res.status === 200) return res.data;
if(res.status === 400){
const error = res.text();
throw new Error(error);
}
})
.catch((err) => console.log(err));
}
The courseApi.test.js looks like this:
import { saveCourse } from './courseApi';
import axios from 'axios';
jest.mock('axios');
describe('check API calls', () => {
it('should update the course', () => {
let res = {
id: 10,
title: "Securing React Apps with Auth0",
slug: "react-auth0-authentication-security",
authorId: 2,
category: "JavaScript"
};
const config = {
method: 'put',
url: 'http://localhost:3001/courses/10',
headers: { "content-type": "application/json" },
data: res
}
}
axios = jest.fn().mockResolvedValue({
status: 200,
data: res
});
let result = await saveCourse(res);
expect(result).toEqual(res);
// expect(axiosMock.put).toHaveBeenCalledTimes(1);
});
});
Tried with mockImplementationOnce as well, in this case the mock axios is not being called.
it("save course scenario", async function () {
const course = {
id: 10,
title: "Securing React Apps with Auth0",
slug: "react-auth0-authentication-security",
authorId: 2,
category: "JavaScript"
};
axios.put.mockImplementationOnce(() => Promise.resolve(course));
expect(saveCourse(course)).resolves.toEqual(course);
expect(axios.put).toHaveBeenCalledTimes(1);
});
Throwing error as follows:
TypeError: Cannot read property 'then' of undefined
24 | data: course
25 | }
> 26 | return axios(config)
| ^
27 | .then((res) => {
28 | if(res.status === 201) { console.log(res); return res.data; }
29 | if(res.status === 200) { console.log(res); return res.data; }
at saveCourse (src/api/courseApi.js:26:10)
at Object.<anonymous> (src/api/courseApi.test.js:39:12)
So how should i fix this, any thing that i missed to set for axios mocking?
Thanks in advance!
I'm trying to test the below axios request written for both put/post as a config option:
export function saveCourse(course){
const config = {
method: course.id ? 'PUT' : 'POST',// POST for create, PUT to update when id already exists.
url: baseUrl + (course.id || ''),
headers: { "content-type": "application/json" },
data: course
}
return axios(config)
.then((res) => {
if(res.status === 201 || res.status === 200) return res.data;
if(res.status === 400){
const error = res.text();
throw new Error(error);
}
})
.catch((err) => console.log(err));
}
The courseApi.test.js looks like this:
import { saveCourse } from './courseApi';
import axios from 'axios';
jest.mock('axios');
describe('check API calls', () => {
it('should update the course', () => {
let res = {
id: 10,
title: "Securing React Apps with Auth0",
slug: "react-auth0-authentication-security",
authorId: 2,
category: "JavaScript"
};
const config = {
method: 'put',
url: 'http://localhost:3001/courses/10',
headers: { "content-type": "application/json" },
data: res
}
}
axios = jest.fn().mockResolvedValue({
status: 200,
data: res
});
let result = await saveCourse(res);
expect(result).toEqual(res);
// expect(axiosMock.put).toHaveBeenCalledTimes(1);
});
});
Tried with mockImplementationOnce as well, in this case the mock axios is not being called.
it("save course scenario", async function () {
const course = {
id: 10,
title: "Securing React Apps with Auth0",
slug: "react-auth0-authentication-security",
authorId: 2,
category: "JavaScript"
};
axios.put.mockImplementationOnce(() => Promise.resolve(course));
expect(saveCourse(course)).resolves.toEqual(course);
expect(axios.put).toHaveBeenCalledTimes(1);
});
Throwing error as follows:
TypeError: Cannot read property 'then' of undefined
24 | data: course
25 | }
> 26 | return axios(config)
| ^
27 | .then((res) => {
28 | if(res.status === 201) { console.log(res); return res.data; }
29 | if(res.status === 200) { console.log(res); return res.data; }
at saveCourse (src/api/courseApi.js:26:10)
at Object.<anonymous> (src/api/courseApi.test.js:39:12)
So how should i fix this, any thing that i missed to set for axios mocking?
Thanks in advance!
Share Improve this question edited Apr 2, 2020 at 13:18 skyboyer 23.8k7 gold badges62 silver badges71 bronze badges asked Apr 2, 2020 at 13:09 Sucheta Sucheta 371 silver badge6 bronze badges1 Answer
Reset to default 7Unit test solution:
index.js:
import axios from 'axios';
export function saveCourse(course) {
const baseUrl = 'http://example./';
const config = {
method: course.id ? 'PUT' : 'POST',
url: baseUrl + (course.id || ''),
headers: { 'content-type': 'application/json' },
data: course,
};
return axios(config)
.then((res) => {
if (res.status === 201 || res.status === 200) return res.data;
if (res.status === 400) {
const error = res.text();
throw new Error(error);
}
})
.catch((err) => console.log(err));
}
index.test.js:
import { saveCourse } from './';
import axios from 'axios';
jest.mock('axios', () => jest.fn());
describe('60992357', () => {
afterEach(() => {
jest.restoreAllMocks();
});
it('should return data if status code equals 200', async () => {
const mRes = { status: 200, data: 'fake data' };
axios.mockResolvedValueOnce(mRes);
const actual = await saveCourse({ id: 1 });
expect(actual).toEqual('fake data');
expect(axios).toBeCalledWith({
method: 'PUT',
url: 'http://example./1',
headers: { 'content-type': 'application/json' },
data: { id: 1 },
});
});
it('should throw error if status code equals 400', async () => {
const mRes = { status: 400, text: jest.fn().mockReturnValue('network') };
axios.mockResolvedValueOnce(mRes);
const logSpy = jest.spyOn(console, 'log');
const actual = await saveCourse({ id: 1 });
expect(actual).toBeUndefined();
expect(axios).toBeCalledWith({
method: 'PUT',
url: 'http://example./1',
headers: { 'content-type': 'application/json' },
data: { id: 1 },
});
expect(mRes.text).toBeCalledTimes(1);
expect(logSpy).toBeCalledWith(new Error('network'));
});
});
unit test results with coverage report:
PASS stackoverflow/60992357/index.test.js (9.916s)
60992357
✓ should return data if status code equals 200 (7ms)
✓ should throw error if status code equals 400 (21ms)
console.log node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866
Error: network
at /Users/ldu020/workspace/github./mrdulin/react-apollo-graphql-starter-kit/stackoverflow/60992357/index.js:671:13
at process._tickCallback (internal/process/next_tick.js:68:7)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 70 | 100 | 100 |
index.js | 100 | 70 | 100 | 100 | 6,7,14
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 11.848s
source code: https://github./mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60992357