updating function called by updateIn() returns an immutable object instead of value
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.
jestjs enzyme immutable.js react-boilerplate
edited Nov 23 at 10:21
profesor79
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
add a comment |
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.
jestjs enzyme immutable.js react-boilerplate
edited Nov 23 at 10:21
profesor79
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
add a comment |
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.
jestjs enzyme immutable.js react-boilerplate
edited Nov 23 at 10:21
profesor79
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
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.
jestjs enzyme immutable.js react-boilerplate
jestjs enzyme immutable.js react-boilerplate
edited Nov 23 at 10:21
profesor79
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
edited Nov 23 at 10:21
profesor79
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
edited Nov 23 at 10:21
profesor79
6,41031634
edited Nov 23 at 10:21
profesor79
6,41031634
edited Nov 23 at 10:21
profesor79
6,41031634
6,41031634
asked Nov 22 at 18:25
Andrew Redican
65
asked Nov 22 at 18:25
Andrew Redican
65
asked Nov 22 at 18:25
Andrew Redican
65
65
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436439%2fupdating-function-called-by-updatein-returns-an-immutable-object-instead-of-va%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436439%2fupdating-function-called-by-updatein-returns-an-immutable-object-instead-of-va%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
