Mock http.get method from onClick in react jest-test - reactjs

Question

In jest test i have mock following scenario.
OnClick method I have to call other component method that is promise one
I tried to mock onclick is working. and making call also fine but not able to mock .then return value
File: DashboardChart.js
import getIntentsSince from '../services/getIntentsSince';
initializeCharts() {
// I want to mock this. I am not able to get .then response value
getIntentsSince(this.state.nowDateTime, DateUtil.getPreviousDayTS(this.state.nowDateTime))
.then((topIntents) => {
// I have to cover the code. Which is here
})
}
getChart(){
this.setState({it has some code})
this.initializeCharts()
}
render(){
return (
<button onClick={this.getChart}> get chart</button>
)
}
File: getIntentsSince.js
import HttpClient from 'custom-http-client';
const client = new HttpClient();
const getIntentsSince = (currentTime, fromIntervalTime) => {
return client.get(`url`).then((data) => {
return data;
})
};
export default getIntentsSince;
This is how i have tried
import React from 'react';
import { shallow, mount } from 'enzyme';
import Dashboard from '../../src/components/DashboardChart';
import getIntentsSince from '../../src/services/getIntentsSince'
import mockHttpClient from 'axp-http-client';
const client = new mockHttpClient();
import mockData from './Intents.json'
describe('Dashboard Page test cases', () => {
let mockValue = jest.mock('../../src/services/getIntentsSince', () => new Promise(resolve => resolve({getIntentsSince: () => {return mockData}})))
beforeAll(()=> {
dashboardMock = mount(<DashboardChart getIntentsSince={mockValue}/>);
});

Answer 1

Here is the solution based on the code you provide.
Folder sturcture:
.
├── DashboardChart.spec.tsx
├── DashboardChart.tsx
├── custom-http-client.ts
└── getIntentsSince.ts
DashboardChart.tsx:
import React, { Component } from 'react';
import getIntentsSince from './getIntentsSince';
const DateUtil = {
getPreviousDayTS(datetime) {
return datetime;
}
};
interface IDashboardChartState {
nowDateTime: string;
}
class DashboardChart extends Component<{}, IDashboardChartState> {
constructor(props) {
super(props);
this.state = {
nowDateTime: '2019'
};
this.getChart = this.getChart.bind(this);
}
public initializeCharts() {
return getIntentsSince(this.state.nowDateTime, DateUtil.getPreviousDayTS(this.state.nowDateTime)).then(
topIntents => {
// I have to cover the code. Which is here
console.log(topIntents);
}
);
}
public getChart() {
this.setState({});
this.initializeCharts();
}
public render() {
return <button onClick={this.getChart}> get chart</button>;
}
}
export default DashboardChart;
getIntentsSince.ts:
import HttpClient from './custom-http-client';
const client = new HttpClient();
const getIntentsSince = (currentTime, fromIntervalTime) => {
return client.get(`url`).then(data => {
return data;
});
};
export default getIntentsSince;
custom-http-client.ts:
export default class HttpClient {
public async get(url) {
return 'real data';
}
}
DashboardChart.spec.tsx:
import React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import DashboardChart from './DashboardChart';
import getIntentsSince from './getIntentsSince';
jest.mock('./getIntentsSince.ts', () => jest.fn());
describe('Dashboard Page test cases', () => {
let wrapper: ReactWrapper;
beforeAll(() => {
wrapper = mount(<DashboardChart />);
});
afterEach(() => {
jest.resetAllMocks();
jest.restoreAllMocks();
});
it('should get indents since correctly', async () => {
const mockedResponse = 'mocked response';
(getIntentsSince as jest.MockedFunction<typeof getIntentsSince>).mockResolvedValueOnce(mockedResponse);
const logSpy = jest.spyOn(console, 'log');
const actualValue = await (wrapper.instance() as any).initializeCharts();
expect(actualValue).toBeUndefined();
expect(logSpy).toBeCalledWith(mockedResponse);
expect(getIntentsSince).toBeCalledWith('2019', '2019');
});
});
Unit test result with coverage report:
PASS src/stackoverflow/55789099/DashboardChart.spec.tsx (6.208s)
Dashboard Page test cases
✓ should get indents since correctly (14ms)
console.log node_modules/jest-mock/build/index.js:860
mocked response
--------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files | 89.47 | 100 | 85.71 | 88.89 | |
DashboardChart.tsx | 89.47 | 100 | 85.71 | 88.89 | 33,34 |
--------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 7.731s, estimated 9s
HTML coverage report:
Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/55789099