TypeError: expect(...).arrayContaining is not a function

Question

I'm trying to test a redux store state every time I pass a given action, I tried many ways but according to the expected output, I think using expect(...).arrayContaining however still my test fail, with the below error:

TypeError: expect(...).arrayContaining is not a function...

I tried also toEqual, objectContaining,.. but all with the same jest error message

myReducer.js:

const { configureStore } = require('@reduxjs/toolkit');
const {
  SELECT_COURSE,
  UNSELECT_COURSE,
  FETCH_COURSE_SUCCESS
} = require('./courseActionTypes');
// course data for testing
const data = [
  {
    id: 1,
    name: "ES6",
    credit: 60
  },
  {
    id: 2,
    name: "Webpack",
    credit: 20
  },
  {
    id: 3,
    name: "React",
    credit: 40
  }
];

// reducer
export const courseReducer = (state = [], action) => {
  switch(action.type) {
    case FETCH_COURSE_SUCCESS:
      return [...state, ...data.map((course) => {
        return { ...course, isSelected: false }}
        )
      ];
    case SELECT_COURSE:
      return [...state, ...data.map((course) =>
        course.id === action.index ? { ...course, isSelected: true } : { ...course }
      )];
    case UNSELECT_COURSE:
      return [...state, ...data.map((course) =>
        course.id === action.index ? { ...course, isSelected: false } : { ...course }
      )];
    default:
      return state;
  }
};
  
// simulate a store to test actions
const store = configureStore({reducer:courseReducer});
console.log(store.getState())
store.dispatch({
  type: FETCH_COURSE_SUCCESS,
})

console.log(store.getState())

I think using expect(...).arrayContaining however still my test fail, with the below error:

TypeError: expect(...).arrayContaining is not a function

myJestCode.js:

import { courseReducer } from "./courseReducer";
const { configureStore } = require('@reduxjs/toolkit');
const {
  SELECT_COURSE,
  UNSELECT_COURSE,
  FETCH_COURSE_SUCCESS
} = require('./courseActionTypes');


describe('course reducer', () => {

  // this test pass
  it('return an empty array as a default state', () => {
    const action = '';
    const store = configureStore({reducer:courseReducer})
    expect(store.getState()).toEqual([])
  });

  // this test fail
  it('should return data course array with isSelected set to false', () => {
    const action = SELECT_COURSE;
    const mockStore = configureStore({reducer:courseReducer});
    mockStore.dispatch({
      type: action
    })
    expect(mockStore.getState()).arrayContaining(
      { id: 1, name: 'ES6', credit: 60, isSelected: false },
      { id: 2, name: 'Webpack', credit: 20, isSelected: false },
      { id: 3, name: 'React', credit: 40, isSelected: false }
    );
  })
})

Could someone please help to fix that

Answer 1

In your case you should combine expect() with toEqual matcher: expect(array).toEqual(expect.arrayContaining(matchArray)). For example:

import { courseReducer } from "./courseReducer";
const { configureStore } = require('@reduxjs/toolkit');
const {
  SELECT_COURSE,
  UNSELECT_COURSE,
  FETCH_COURSE_SUCCESS
} = require('./courseActionTypes');


describe('course reducer', () => {

  // this test pass
  it('return an empty array as a default state', () => {
    const action = '';
    const store = configureStore({reducer:courseReducer})
    expect(store.getState()).toEqual([])
  });

  // this test fail
  it('should return data course array with isSelected set to false', () => {
    const action = SELECT_COURSE;
    const mockStore = configureStore({reducer:courseReducer});
    mockStore.dispatch({
      type: action
    })
    expect(mockStore.getState()).toEqual(expect.arrayContaining([
      { id: 1, name: 'ES6', credit: 60, isSelected: false },
      { id: 2, name: 'Webpack', credit: 20, isSelected: false },
      { id: 3, name: 'React', credit: 40, isSelected: false }
    ]);
  })
})

You can read more on expect.arrayContaining in the jest documentation: https://jestjs.io/docs/expect#expectarraycontainingarray