ZamarShoo
@ZamarShoo
React/Vue, Node/PHP, Wordpress/Drupal

Почему не срабатывают action в Jest?

Почему мне тесты выдают результат, будто экшены не срабатывают, то есть я пытаюсь получить ответ 4, а мне приходит ответ 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});
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
@disappearedstar
Фронтенд-разработчик
У вас addItem зачем-то объявлен как thunk. Когда вы вызываете addItem(), в action у вас не объект, а функция. Уберите dispatch:
export const addItem = () => ({type: ADD_ITEM});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы