ReactJS / Redux: тестирование состояния редуктора с массивом объектов внутри получает неопределенный массив

Question

Я работаю для теста редуктора, когда я пытаюсь проверить 1 из моих типов действий, ожидаемые и полученные значения не совпадают.

eventReducer.test.js

import reducer from './eventReducer';
import { GET_EVENTS } from '../actions/types';

describe('event reducer', () => {
  it('should return initial state', () => {
    expect(reducer(undefined, {})).toEqual({
      eventDetails: [],
      loading: false
    });
  })

  it('should store data from db upon mounting component', () =>{
    expect(reducer({}, {
      type: GET_EVENTS,
      eventDetails: [
        {
          firstName: 'Damian',
          lastName: 'Wasilewski'
        }
      ]
    })
    ).toEqual({
      eventDetails: [
        {
          firstName: 'Damian',
          lastName: 'Wasilewski'
        }
      ],
      loading: false
    })
  });
})

eventReducer.js

import { GET_EVENTS, ADD_EVENT, DELETE_EVENT, EVENTS_LOADING } from '../actions/types';

const initialState = {
  eventDetails: [],
  loading: false
}

export default function (state = initialState, action) {
  switch(action.type) {
   case GET_EVENTS:
    return {
     ...state,
     eventDetails: action.payload,
     loading: false
   };
   case DELETE_EVENT:
    return {
     ...state,
     eventDetails: state.eventDetails.filter(event => event._id !== 
     action.payload)
   };
   case ADD_EVENT:
    return {
     ...state,
     eventDetails: [action.payload, ...state.eventDetails]
   };
   case EVENTS_LOADING:
    return {
     ...state,
     loading: true
   }
   default:
    return state;
 }
}

Мой первый тест выполняется правильно, но когда я пытаюсь выполнить второй, он не соответствует полученным и ожидаемым значениям, проблемас массивом eventDetails, он продолжает выводить, что его значение не определено.

Тестовый вывод

FAIL src/reducers/eventReducer.test.js
 ● event reducer › should store data from db upon mounting component

expect(received).toEqual(expected)

Expected value to equal:
  {"eventDetails": [{"firstName": "Damian", "lastName": "Wasilewski"}], "loading": false}
Received:
  {"eventDetails": undefined, "loading": false}

Difference:

- Expected
+ Received

  Object {
-   "eventDetails": Array [
-     Object {
-       "firstName": "Damian",
-       "lastName": "Wasilewski",
-     },
-   ],
+   "eventDetails": undefined,
    "loading": false,
  }

  21 |       ]
  22 |     })
> 23 |   ).toEqual({
     |     ^
  24 |     eventDetails: [
  25 |       {
  26 |         firstName: 'Damian',

  at Object.toEqual (src/reducers/eventReducer.test.js:23:5)

Что может вызвать проблемы с неопределенным массивом?

Answer 1

Вы устанавливаете event.details для action.payload, но в своем тесте вы не отправляете свойство полезной нагрузки.

it('should store data from db upon mounting component', () =>{
  expect(reducer({}, {
    type: GET_EVENTS,
    payload: [
      {
        firstName: 'Damian',
        lastName: 'Wasilewski'
      }
    ]
  })
  ).toEqual({
    eventDetails: [
      {
        firstName: 'Damian',
        lastName: 'Wasilewski'
      }
    ],
    loading: false
  })
  });
})

Это должно решить вашу проблему