React testing axios get request in componentDidMount using jest - reactjs

Question

I am new to React testing and I am trying to test a get request which is coming from a backend call using axios.
The component:
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
stockData: [],
}
}
componentDidMount() {
axios.get("http://localhost:8080/stocks")
.then(response => {
this.setState({
stockData: response.data
})
})
}
render() {
return (
<ChildComponent stockData={this.state.stockData}/>
)
}
}
The data fetched from the call is something like the following:
stockData: [
{
"ticker": "AAPL",
"name": "Apple Inc",
"priceChanges": {
"daily": 1.55,
"weekly": -3.55,
"monthly": -20.00
},
"financialData": {
"roa": 5.74,
"roe": 20.07,
"market_cap": "1.2T"
}
},
{
"ticker": "MSFT",
"name": "Microsoft Corporation",
"priceChanges": {
"daily": 4.35,
"weekly": 1.25,
"monthly": -22.05
},
"financialData": {
"roa": 8.73,
"roe": 15.07,
"market_cap": "1.3T"
}
}
//and many other similar objects
]
I have read that I should not really use the real get request and instead use some "mock" data but don't have an idea how to implement it. I have tried the following, but I am not sure if it is the right way to do this. Also, I am getting an error: TypeError: Cannot read property 'then' of undefined
test('should fetch company', () => {
const wrapper = shallow(<ParentComponent/>);
const resp = {stockData: [
{
"ticker": "AAPL",
"name": "Apple Inc",
"priceChanges": {
"daily": 1.55,
"weekly": -3.55,
"monthly": -20.00
},
"financialData": {
"roa": 5.74,
"roe": 20.07,
"market_cap": "1.2T"
}
}
};
wrapper.instance().componentDidMount().then(resp => {
expect(wrapper.state('stockData')).toContain(resp.stockData);
});
});

Answer 1

You can use jest.spyOn(object, methodName) to mock axios.get method and its resolved value. Since axios.get is an asynchronous operation, We need to wait until it is done.
E.g.
parent.jsx:
import React from 'react';
import { ChildComponent } from './child';
import axios from 'axios';
export class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
stockData: [],
};
}
componentDidMount() {
axios.get('http://localhost:8080/stocks').then((response) => {
this.setState({ stockData: response.data });
});
}
render() {
return <ChildComponent stockData={this.state.stockData} />;
}
}
child.jsx:
import React, { Component } from 'react';
export class ChildComponent extends Component {
render() {
return <div></div>;
}
}
parent.test.jsx:
import { ParentComponent } from './parent';
import { shallow } from 'enzyme';
import axios from 'axios';
import React from 'react';
import { act } from 'react-dom/test-utils';
const whenStable = async () => {
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});
};
describe('61465031', () => {
it('should pass', async () => {
const mResponse = { data: ['a', 'b'] };
const getSpy = jest.spyOn(axios, 'get').mockResolvedValueOnce(mResponse);
const wrapper = shallow(<ParentComponent></ParentComponent>);
await whenStable();
expect(wrapper.find('ChildComponent').prop('stockData')).toEqual(['a', 'b']);
getSpy.mockRestore();
});
});
unit test results with coverage report:
PASS stackoverflow/61465031/parent.test.jsx (11.345s)
61465031
✓ should pass (20ms)
------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------|---------|----------|---------|---------|-------------------
All files | 95.45 | 100 | 85.71 | 94.12 |
child.jsx | 85.71 | 100 | 50 | 80 | 5
parent.jsx | 100 | 100 | 100 | 100 |
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 12.876s
source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61465031