updating function called by updateIn() returns an immutable object instead of value

Question

We have a react-boilerplate setup, which uses ImmutableJS, Jest and Enzyme as part of its framework.

We have come across an issue when testing reducer using ImmutableJS's updateIn().

The page works OK, but we are unable to test it, as in reducer test, the immutable updater function receives immutable object, but we are expecting a plain JS object to operate with.

reducer.js:

case ACTION_TYPE: {

  const targetSectionId = action.sectionId;
  return state.updateIn(['allSections'], (allSections) =>

    allSections.map((section) => {

      // section is wrapped in immutable when testing
      // on regular execution, section.get() will fail
      // as it is plain javascript object
      const updatedSection = Object.assign({}, section);
      const sectionIdMatched = updatedSection.sectionId === targetSectionId;

      if (sectionIdMatched) {
        // on tests, does not get here
        // on regular execution, we get here
        updatedSection.commonSectionNames = action.commonSections;
        return updatedSection;
      }
      return updatedSection;
    })

  );

}

=============

reducer.test.js:

it('should handle the action correctly', () => {
  // arrange

  const sectionId = 15;
  const valueToSet = ['fixture'];
  const initialState = fromJS({
     allSections: [{ sectionId: 15, commonSectionNames: [] }]
  });
  const expectedState = fromJS({
     allSections: [{ sectionId: 15, commonSectionNames: valueToSet }] 
  });


  // act
  const result = reducer(initialState, action(sectionId, valueToSet));


  // assert
  expect(result).toEqual(expectedState);
});

============

Any advise with this is appreciated.

Answer 1

That is just the way it is. immutable updater function will receive immutable object. If you need plainJS object, use toJS() like this:

allSections.map((tempSection) => {
    const section = tempSection.toJS();
// perform operations with plainJS "section" here