reactjs empty data when mocking axios.get with jestjs mock - reactjs

Question

I am developing an application in react and for the first time I decided to implement tests. I started with the simpler components, which I still had trouble with, but now I would like to test more complex components, especially with API calls via axios.
My app looks like this:
import * as React from "react";
import Axios from "axios";
import { AnyData } from "../../interface/AnyDataInterface";
interface IProps {
}
interface IState {
loading: boolean | undefined,
myData: AnyData | undefined
}
export default class Home extends React.Component <IProps, IState> {
constructor (props: IProps){
super(props);
this.state = {
loading: true,
myData: {
field: undefined,
...
}
};
}
fetchData = ():void => {
this.setState({ loading: true });
Axios.get<AnyData>('my-url')
.then(res => {
if (res.status === 200 && res != null) {
this.setState({ myData:{... res.data} });
this.setState({ loading: false });
} else {
console.log('problem when fetching the logs from backend');
}
})
.catch(error => {
console.log(error);
});
}
render():JSX.Element {
return(
<div className="container">
<div>
<button role="button" onClick={this.fetchData}>Search</button>
</div>
{this.state.loading == true ? <p>Wait</p>:
<div role="composite">
{ Some child component that will render data }
</div>
}
</div>
);
}
}
My test looks like this:
import axios from 'axios';
import React from 'react';
import { render, screen, fireEvent, waitFor } from '#testing-library/react';
import Home from './Home';
jest.mock('axios');
describe('Home component', () => {
test('it can be clicked', async () => {
const fakeData = [{
some_field: some_data,
...
}];
axios.get = jest.fn().mockResolvedValue(() =>
Promise.resolve({data: fakeData}));
render(<Home />);
fireEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(axios.get).toBeCalledWith("my-url");
});
await waitFor(() => {
//Both expect should pass, if the title is there the data should also appear
expect(screen.getByText('some title text')).toBeInTheDocument(); //Pass without error
expect(screen.getByText('the data from fakeData that should be there')).toBeInTheDocument(); //Send me an error because jest is unable to find some_data
});
});
});
When I wrote this test it failed every time but the problem was not in my test, the problem was in my data fetch function. In the .then I had a condition which was the following: if (res.status === 200 && res != null) { and the res.status === 200 was a condition never satisfied.
So I removed this condition and the call goes through normally. But I had to change a part of my code that is normally not problematic, is there a way to mock the status of the response too ? So that I can put this condition back in my function.
I have another problem that appears now, in my test my component displays well the information "after click" but each field that appears has its corresponding data empty, the data seems not to pass although the .then passes and does not send me to the .catch.
What seems strange to me is that by removing the condition res.status === 200 in my data fetch function and leaving the condition res != null, the test still passes (with the same empty data problem). Finally, by adding a console.log("data: ", res); in my .then in my fetch data function of my component I get, when the test is executed, the following log: data: [Function (anonymous)].
I don't know if this could explain this behavior but my test is in javascript while my classes and functions are in typescript. But the data I fill in my test has the right form (the same as the type requested in my class) so typescript should see that the type matches and have no particular problem
If anyone knows how to answer any of these questions it would really help me, I've been stalling on this test for a while and it's starting to drive me crazy.
EDIT:
I just realized that in fetchData() in my component I am trying to access res.data but the fake data I am sending in my test is in the form fakeData = [{...}]. Could this be the reason why my object is empty?
I tried to change this fake data in my test to: fakeData = [{ data: { ...}}] but I still have the same problem of empty response when calling the get method of axios.
EDIT:
I've try to change test file to a .tsx file and change my "fakeData" in my test to:
jest.mock('axios');
describe('Home component', () => {
test('it can be clicked', async () => {
const fakeData: AnyData = {
"some_field": some_data,
...
};
const fakeConfig: AxiosRequestConfig<any> = {
"maxBodyLength": -1
};
const fakeHeaders: AxiosResponseHeaders= {
"access-control-allow-credentials": "true",
"access-control-allow-headers": "*",
"access-control-allow-methods": "*",
"access-control-allow-origin": "some-url",
"access-control-expose-headers": "scrollId",=
"content-type": "application/json; charset=utf-8",
....
"x-powered-by": "Express"
}
const res: AxiosResponse<AnyData, any> = {
config: fakeConfig,
data: fakeData,
headers: fakeHeaders,
status: 200,
statusText: "OK",
};
axios.get = jest.fn().mockResolvedValue(() =>
Promise.resolve({res: res}));
render(<Home />);
fireEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(axios.get).toBeCalledWith("my-url");
});
...
});
});
But even with this method it still doesn't work, yet I really have the impression that the problem comes from the formatting of the data I am sending and I don't see how my data differs from the one requested in fetchData(). As for the fields in my data, I'm sure they're good, so I guess the problem is with the reading of res.data.
When I make the new test by putting a console.log of myData in fetchData() I get the following data: { some_field: undefined, ... }
Thanks in advance if you take the time to help me.

Answer 1

I finally realized my mistake on my test. It was in the rewriting of the axios.get method.
The code that works is as follows:
jest.mock('axios');
describe('Home component', () => {
test('it can be clicked', async () => {
const fakeData: AnyData = {
"some_field": some_data,
...
};
const fakeConfig: AxiosRequestConfig<any> = {
"maxBodyLength": -1
};
const fakeHeaders: AxiosResponseHeaders= {
"access-control-allow-credentials": "true",
"access-control-allow-headers": "*",
"access-control-allow-methods": "*",
"access-control-allow-origin": "some-url",
"access-control-expose-headers": "scrollId",=
"content-type": "application/json; charset=utf-8",
....
"x-powered-by": "Express"
}
const res: AxiosResponse<AnyData, any> = {
config: fakeConfig,
data: fakeData,
headers: fakeHeaders,
status: 200,
statusText: "OK",
};
(axios.get as jest.Mock).mockResolvedValue(res); //THE LINE THAT CHANGE EVERYTHING
render(<Home />);
fireEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(axios.get).toBeCalledWith("my-url");
});
...
});
});