How do I test this reducer correctly? - reactjs

Question

I am working on unit test for my reducer and I don't know what I am doing wrong here. The error I am getting in the console is that Matcher error: received value must be a non-null object and received value is undefined.
Reducer
import uuid from "uuid/v4";
import {
ADD_TODO,
REMOVE_TODO,
TOGGLE_TODO,
EDIT_TODO
} from "../constants/Actions";
const reducer = (state, action) => {
switch (action.type) {
case ADD_TODO:
return [...state, { id: uuid(), task: action.task, completed: false }];
case REMOVE_TODO:
return state.filter(todo => todo.id !== action.id);
case TOGGLE_TODO:
return state.map(todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
);
case EDIT_TODO:
return state.map(todo =>
todo.id === action.id ? { ...todo, task: action.task } : todo
)
default:
return state;
}
};
export default reducer;
And my test is.
import { useReducer } from "react";
import { act, renderHook } from "#testing-library/react-hooks";
import { reducer } from "../src/reducers/Todo";
import { ADD_TODO } from '../src/constants/Actions'
describe("Todo reducer tests", () => {
it("Add Todo", () => {
const { result } = renderHook(() => useReducer(reducer, []));
const [state, dispatch] = result.current;
act(() => {
dispatch({ type: ADD_TODO })
});
expect(state).toMatchObject({
id: 1,
task: 'Hello',
completed: true,
});
});
});

Answer 1

I recommend you to check redux offical how to write test correctly
this help me a lot and they explain for every stuff you need
here is my code where I use like redux show.
import reducer from './reducer';
import * as actionTypes from '../Actions/actionTypes';
describe('reducer CheclUp', () => {
it('should return the initial state', () => {
expect(reducer(undefined, {})).toEqual({
favorite: [],
SearchPlaces: [],
});
});
it('should remove favorite and move it to SearchPlaces', () => {
expect(reducer({
favorite: [{Key: "1"}],
SearchPlaces: [],
}, {
type: actionTypes.REMOVE_FAVORITE,
payload: "1"
})).toEqual({
favorite: [],
SearchPlaces: [{Key: "1"}],
});
});
it('should remove SearchPlaces and move it to favorite', () => {
expect(reducer({
favorite: [],
SearchPlaces: [{Key: "1"}],
}, {
type: actionTypes.ADD_EXISTED_TO_FAV,
payload: "1"
})).toEqual({
favorite: [{Key: "1"}],
SearchPlaces: [],
});
});
it('should remove from SearchPlaces', () => {
expect(reducer({
favorite: [],
SearchPlaces: [{Key: "1"}],
}, {
type: actionTypes.REMOVE_SEARCHED_PLACE,
payload: "1"
})).toEqual({
favorite: [],
SearchPlaces: [],
});
});
it('should add to SearchPlaces', () => {
expect(reducer({
favorite: [],
SearchPlaces: [],
}, {
type: actionTypes.ADD_SEARCHED_PLACE,
payload: [{Key: "1"}]
})).toEqual({
favorite: [],
SearchPlaces: [{Key: "1"}],
});
});
it('should remove from SearchPlaces', () => {
expect(reducer({
favorite: [],
SearchPlaces: [],
}, {
type: actionTypes.ADD_FAVORITE,
payload: [{Key: "1"}]
})).toEqual({
favorite: [{Key: "1"}],
SearchPlaces: [],
});
});
});

Answer 2

Your state starts off as undefined because you don't have a default state set. Your reducer hits the default case and returns state, which isn't set in your first reducer run. I recommend setting a default state in your reducer:
const reducer = (state = [], action) => {
You can also pass in an initial state instead:
const { result } = renderHook(() => useReducer(reducer, []));