Why don't actions work in Jest?

Question

React

Why do the tests give me the result that the actions do not work, that is, I try to get the answer 4, but I get the answer 3

todo-reducer.test.js:

import React from "react";
import todoReducer, {addItem} from './todo-reducer'

const testState = {
    items: [
        {id: 0, heading: 'New Item', checkboxes: [
                {id: 0, message: 'message 0', active: false},
                {id: 1, message: 'message 1', active: true},
                {id: 2, message: 'message 2', active: false},
                {id: 3, message: 'message 3', active: true},
                {id: 4, message: 'message 4', active: false},
                {id: 5, message: 'message 5', active: false},
                {id: 6, message: 'message 6', active: true},
                {id: 7, message: 'message 7', active: false},
                {id: 8, message: 'message 8', active: false}]
        },
        {id: 1, heading: 'New Item #2', checkboxes: [
                {id: 0, message: 'message 10', active: true},
                {id: 1, message: 'message 11', active: true},
                {id: 2, message: 'message 12', active: true},
                {id: 3, message: 'message 13', active: true},
                {id: 4, message: 'message 14', active: true},
                {id: 5, message: 'message 15', active: true}]
        },
        {id: 2, heading: 'New Item #3', checkboxes: [
                {id: 0, message: 'message 20', active: false},
                {id: 1, message: 'message 21', active: false},
                {id: 2, message: 'message 22', active: false},
                {id: 3, message: 'message 23', active: false},
                {id: 4, message: 'message 24', active: false}]
        },
    ],
    darkColor: false
};

it('length of item should be incremented', () => {
    const action = addItem()
    const newState = todoReducer(testState, action)
    expect(newState.items.length).toBe(4)
})
})

todo-reducer.js:

const ADD_ITEM = 'ADD_ITEM';

let initialState = {
    items: [
        {
            id: 0,
            heading: 'New Item',
            checkboxes: []
        }
    ],
    darkColor: false
};
const todoReducer = (state = initialState, action) => {

    switch (action.type) {

       case ADD_ITEM: {
            return {
                ...state,
                items: [...state.items,
                    { id: state.items.length, heading: 'New Item', checkboxes: [] }]
            }
        }

        default:
            return state
    }
};

export const addItem = () => (dispatch) => dispatch({type: ADD_ITEM});

Answer 1

For addItemsome reason, you have declared it as a thunk. When you call addItem(), actionyou don't have an object, but a function. Remove dispatch:
export const addItem = () => ({type: ADD_ITEM});