How do write unit test for function inside Context API? - reactjs

Question

Currently I am not able to test the lines as test coverage says. Please help me.
Test coverage is saying lines like dispatch but I don't know how to test it.
This is my file ListMeetingContext.tsx
import React, { createContext, ReactElement, useReducer } from 'react';
import { IMeeting } from '#interfaces';
import { REDUCER_ACTIONS } from '#enums/ReducerAction';
import { meetingData } from '#constants';
export const initListMeeting: IMeeting[] = meetingData;
type ReducerAction = {
type: REDUCER_ACTIONS;
payload: IMeeting | number;
};
export type MeetingsContext = {
children: ReactElement | ReactElement[];
};
export type ListMeetingContextType = {
listMeeting: IMeeting[];
handleAddMeeting: (newMeeting: IMeeting) => void;
handleUpdateMeeting: (newMeeting: IMeeting) => void;
handleRemoveMeeting: (id: number) => void;
};
export const reducer = (
state: IMeeting[],
action: ReducerAction,
): IMeeting[] => {
switch (action.type) {
case REDUCER_ACTIONS.ADD_MEETING:
// TODO: as IMeeting
return [...state, action.payload as IMeeting];
case REDUCER_ACTIONS.REMOVE_MEETING:
return state.filter((meeting) => meeting.id !== action.payload);
case REDUCER_ACTIONS.UPDATE_MEETING:
return state.map((meeting: IMeeting) =>
// TODO: as IMeeting
meeting.id === (action.payload as IMeeting).id
? (action.payload as IMeeting)
: meeting,
);
default:
return state;
}
};
export const ListMeetingContext = createContext<ListMeetingContextType>({
listMeeting: meetingData,
handleAddMeeting: () => null,
handleUpdateMeeting: () => null,
handleRemoveMeeting: () => null,
});
export const StateProvider = ({ children }: MeetingsContext): JSX.Element => {
const [listMeeting, dispatch] = useReducer(reducer, initListMeeting);
const handleAddMeeting = (newMeeting: IMeeting) => {
// Uncovered line
dispatch({ type: REDUCER_ACTIONS.ADD_MEETING, payload: newMeeting });
};
const handleUpdateMeeting = (newMeeting: IMeeting) => {
// Uncovered line
dispatch({ type: REDUCER_ACTIONS.UPDATE_MEETING, payload: newMeeting });
};
const handleRemoveMeeting = (id: number) => {
// Uncovered line
dispatch({ type: REDUCER_ACTIONS.REMOVE_MEETING, payload: id });
};
return (
<ListMeetingContext.Provider
value={{
listMeeting,
handleAddMeeting,
handleRemoveMeeting,
handleUpdateMeeting,
}}
>
{children}
</ListMeetingContext.Provider>
);
};
This is Image about test Coverage
The test for coverage lines tells me to put it at the bottom
This is file ListMeetingContext.test.tsx
import React from 'react';
import {
ListMeetingContext,
MeetingsContext,
reducer,
StateProvider,
} from '#context';
import { REDUCER_ACTIONS } from '#enums';
import { IMeeting } from '#interfaces';
import renderer from 'react-test-renderer';
import { meetingData } from '#constants';
import { fireEvent, render, screen } from '#testing-library/react';
describe('Test [ListMeetingContext] function', () => {
test('Action [ADD_MEETING] should update context state/add new item to context state with action[ADD_MEETING]', () => {
const state: IMeeting[] = [];
const action = {
type: REDUCER_ACTIONS.ADD_MEETING,
payload: meetingData[0],
};
const result = reducer(state, action);
expect(result).toEqual([action.payload]);
});
test('Action [REMOVE_MEETING] should update context state/remove an item from context state with action[REMOVE_MEETING]', () => {
const state: IMeeting[] = meetingData;
const action = {
type: REDUCER_ACTIONS.REMOVE_MEETING,
payload: 1,
};
const result = reducer(state, action);
expect(result).toEqual([meetingData[1]]);
});
test('Action [UPDATE_MEETING] should update context state/update an item from context state with action[UPDATE_MEETING]', () => {
const state: IMeeting[] = [meetingData[0]];
const action = {
type: REDUCER_ACTIONS.UPDATE_MEETING,
payload: meetingData[0],
};
const result = reducer(state, action);
expect(result).toEqual([action.payload]);
});
test('Action [EMPTY_ACTION] should return state', () => {
const state: IMeeting[] = [meetingData[0]];
const action = {
type: REDUCER_ACTIONS.EMPTY_ACTION,
payload: meetingData[0],
};
const result = reducer(state, action);
expect(result).toEqual(state);
});
test('[StateProvider] with default value', () => {
const component = renderer
.create(<StateProvider {...({} as MeetingsContext)} />)
.toJSON();
expect(component).toMatchSnapshot();
});
type Props = {
handleAddItem: () => void;
handleUpdateItem: () => void;
handleRemoveItem: () => void;
};
const TestComponent = ({
handleAddItem,
handleUpdateItem,
handleRemoveItem,
}: Props): JSX.Element => {
return (
<>
<button data-testid="remove-meeting-button" onClick={handleRemoveItem}>
Remove
</button>
<button data-testid="add-meeting-button" onClick={handleAddItem}>
Add
</button>
<button data-testid="update-meeting-button" onClick={handleUpdateItem}>
Update
</button>
</>
);
};
test('component handles button click', () => {
const handleAddMeeting = jest.fn();
const handleUpdateMeeting = jest.fn();
const handleRemoveMeeting = jest.fn();
const listMeeting = meetingData;
render(
<ListMeetingContext.Provider
value={{
listMeeting,
handleAddMeeting,
handleUpdateMeeting,
handleRemoveMeeting,
}}
>
<TestComponent
handleAddItem={handleAddMeeting}
handleUpdateItem={handleUpdateMeeting}
handleRemoveItem={handleRemoveMeeting}
/>
</ListMeetingContext.Provider>,
);
fireEvent.click(screen.getByTestId('remove-meeting-button'));
expect(handleRemoveMeeting).toHaveBeenCalledTimes(1);
});
});
Currently I am not able to test the lines as test coverage says. Please help me