React/Jest function component testing - reactjs

Question

How can I write a test case for my function component which is having API call to return data on load? For example consider below code:
//List of tasKs and process tasK information
const TaskList = props => {
/**Function to load data on component initialization */
useEffect(() => {
getData(true);
}, []);
/**
* Function to pull tasks from database
* #param {filters} applyfilter
*/
const getData = async applyfilter => {
try {
let taskData = await service.getTasks()
taskData.tasks = taskData.tasks.sort(GFG_sortFunction)
let status_data = taskData.tasks.filter(values => {
if (statuses.includes(values.status_id)) {
return true
}
})
setData(status_data);
setT_Data(taskData.tasks);
setshowGenerateDPF(true);
builtFilter(taskData.tasks);
if ((selectedPlatforms.length !== 0 || selectedAssets.length !== 0 || selectedCategories.length !== 0 || selectedStatus.length !== 0) && applyfilter)
FilterTasksData(selectedPlatforms, selectedAssets, selectedCategories, selectedStatus, taskData.tasks);
}
catch (err) {
throw err;
}
};
return (
<>
<Row>
<div data-testid="tasklist" style={{ float: "left", padding: "0" }} className={[classes.taskList, "col-md-8"].join(' ')}>
<span style={{ float: "left" }}>
{tasks.length} Tasks </span>
</div>
</Row>
</>
}
I want to write unit test case for getData method. How can I do that?

Answer 1

You would want to mock the response and the other functions (like setData for example)
Here is a random example of mocking a fetch request with "react testing library" that renders div with test id that outputs text data from request
import YourComponent from '../'
import React from 'react';
import '#testing-library/jest-dom/extend-expect';
import { render, waitForElement } from '#testing-library/react';
describe('59892259', () => {
let originFetch;
beforeEach(() => {
originFetch = (global as any).fetch;
});
afterEach(() => {
(global as any).fetch = originFetch;
});
it('should pass', async () => {
const fakeResponse = { data: 'example data' };
const mRes = { json: jest.fn().mockResolvedValueOnce(fakeResponse) };
const mockedFetch = jest.fn().mockResolvedValueOnce(mRes as any);
(global as any).fetch = mockedFetch;
const { getByTestId } = render(<YourComponent />);
const div = await waitForElement(() => getByTestId('test'));
expect(div).toHaveTextContent('example data');
expect(mockedFetch).toBeCalledTimes(1);
expect(mRes.json).toBeCalledTimes(1);
});
});
you can write up a test that will expect to see "{tasks.length} Tasks" span's text as anything you mock, just make sure to mock or import the global store(redux/mobx) or hooks in your testing env so you will be able to mock the method calls as well