Redux Jest is not receiving value as expected
I'm getting
Expected value to equal:
[{"id": 1, "text": "Run the tests"}, {"id": 0, "text": "Use Redux"}]
Received:
[{"id": 0, "text": "Use Redux"}, {"id": 1, "text": "Run the tests"}]
I don't really understand on how to make this reducer test pass. I'm referencing various github projects to have a better understanding on testing. I'm not sure what i can do to make the test pass. Here is what i have.
Im testing using jest.
actions/actions.js
let nextTodoId = 0;
export const addPost = text => ({
type: 'ADD_POST',
id: nextTodoId++,
text
})
reducers/myPosts
const initialState = [
{
text: 'Use Redux',
id: 0
}
]
const myPosts = (state = initialState, action) => {
switch(action.type){
case 'ADD_POST':
const post = {
id:state.reduce((maxId, post) => Math.max(post.id, maxId), -1) + 1,
text:action.text,
}
return [...state, post];
default:
return state
}
}
export default myPosts
tests/reducers.js
import { addPost } from '../actions/actions';
import myPosts from '../reducers/myPosts';
import uuid from 'uuid';
describe('myPosts myPosts', () => {
it('should return the initial state', () => {
expect(myPosts(undefined, {})).toEqual([
{
text: 'Use Redux',
id: 0
}
])
})
it('should handle ADD_POST', () => {
expect(
myPosts(, {
type: 'ADD_POST',
text: 'Run the tests'
})
).toEqual([
{
text: 'Run the tests',
id: 0
}
])
expect(
myPosts(
[
{
text: 'Use Redux',
id: 0
}
],
{
type: 'ADD_POST',
text: 'Run the tests',
id:0
}
)
).toEqual([
{
text: 'Run the tests',
id: 1
},
{
text: 'Use Redux',
id: 0
}
])
})
})
javascript reactjs redux jestjs
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
add a comment |
I'm getting
Expected value to equal:
[{"id": 1, "text": "Run the tests"}, {"id": 0, "text": "Use Redux"}]
Received:
[{"id": 0, "text": "Use Redux"}, {"id": 1, "text": "Run the tests"}]
I don't really understand on how to make this reducer test pass. I'm referencing various github projects to have a better understanding on testing. I'm not sure what i can do to make the test pass. Here is what i have.
Im testing using jest.
actions/actions.js
let nextTodoId = 0;
export const addPost = text => ({
type: 'ADD_POST',
id: nextTodoId++,
text
})
reducers/myPosts
const initialState = [
{
text: 'Use Redux',
id: 0
}
]
const myPosts = (state = initialState, action) => {
switch(action.type){
case 'ADD_POST':
const post = {
id:state.reduce((maxId, post) => Math.max(post.id, maxId), -1) + 1,
text:action.text,
}
return [...state, post];
default:
return state
}
}
export default myPosts
tests/reducers.js
import { addPost } from '../actions/actions';
import myPosts from '../reducers/myPosts';
import uuid from 'uuid';
describe('myPosts myPosts', () => {
it('should return the initial state', () => {
expect(myPosts(undefined, {})).toEqual([
{
text: 'Use Redux',
id: 0
}
])
})
it('should handle ADD_POST', () => {
expect(
myPosts(, {
type: 'ADD_POST',
text: 'Run the tests'
})
).toEqual([
{
text: 'Run the tests',
id: 0
}
])
expect(
myPosts(
[
{
text: 'Use Redux',
id: 0
}
],
{
type: 'ADD_POST',
text: 'Run the tests',
id:0
}
)
).toEqual([
{
text: 'Run the tests',
id: 1
},
{
text: 'Use Redux',
id: 0
}
])
})
})
javascript reactjs redux jestjs
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
add a comment |
I'm getting
Expected value to equal:
[{"id": 1, "text": "Run the tests"}, {"id": 0, "text": "Use Redux"}]
Received:
[{"id": 0, "text": "Use Redux"}, {"id": 1, "text": "Run the tests"}]
I don't really understand on how to make this reducer test pass. I'm referencing various github projects to have a better understanding on testing. I'm not sure what i can do to make the test pass. Here is what i have.
Im testing using jest.
actions/actions.js
let nextTodoId = 0;
export const addPost = text => ({
type: 'ADD_POST',
id: nextTodoId++,
text
})
reducers/myPosts
const initialState = [
{
text: 'Use Redux',
id: 0
}
]
const myPosts = (state = initialState, action) => {
switch(action.type){
case 'ADD_POST':
const post = {
id:state.reduce((maxId, post) => Math.max(post.id, maxId), -1) + 1,
text:action.text,
}
return [...state, post];
default:
return state
}
}
export default myPosts
tests/reducers.js
import { addPost } from '../actions/actions';
import myPosts from '../reducers/myPosts';
import uuid from 'uuid';
describe('myPosts myPosts', () => {
it('should return the initial state', () => {
expect(myPosts(undefined, {})).toEqual([
{
text: 'Use Redux',
id: 0
}
])
})
it('should handle ADD_POST', () => {
expect(
myPosts(, {
type: 'ADD_POST',
text: 'Run the tests'
})
).toEqual([
{
text: 'Run the tests',
id: 0
}
])
expect(
myPosts(
[
{
text: 'Use Redux',
id: 0
}
],
{
type: 'ADD_POST',
text: 'Run the tests',
id:0
}
)
).toEqual([
{
text: 'Run the tests',
id: 1
},
{
text: 'Use Redux',
id: 0
}
])
})
})
javascript reactjs redux jestjs
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
I'm getting
Expected value to equal:
[{"id": 1, "text": "Run the tests"}, {"id": 0, "text": "Use Redux"}]
Received:
[{"id": 0, "text": "Use Redux"}, {"id": 1, "text": "Run the tests"}]
I don't really understand on how to make this reducer test pass. I'm referencing various github projects to have a better understanding on testing. I'm not sure what i can do to make the test pass. Here is what i have.
Im testing using jest.
actions/actions.js
let nextTodoId = 0;
export const addPost = text => ({
type: 'ADD_POST',
id: nextTodoId++,
text
})
reducers/myPosts
const initialState = [
{
text: 'Use Redux',
id: 0
}
]
const myPosts = (state = initialState, action) => {
switch(action.type){
case 'ADD_POST':
const post = {
id:state.reduce((maxId, post) => Math.max(post.id, maxId), -1) + 1,
text:action.text,
}
return [...state, post];
default:
return state
}
}
export default myPosts
tests/reducers.js
import { addPost } from '../actions/actions';
import myPosts from '../reducers/myPosts';
import uuid from 'uuid';
describe('myPosts myPosts', () => {
it('should return the initial state', () => {
expect(myPosts(undefined, {})).toEqual([
{
text: 'Use Redux',
id: 0
}
])
})
it('should handle ADD_POST', () => {
expect(
myPosts(, {
type: 'ADD_POST',
text: 'Run the tests'
})
).toEqual([
{
text: 'Run the tests',
id: 0
}
])
expect(
myPosts(
[
{
text: 'Use Redux',
id: 0
}
],
{
type: 'ADD_POST',
text: 'Run the tests',
id:0
}
)
).toEqual([
{
text: 'Run the tests',
id: 1
},
{
text: 'Use Redux',
id: 0
}
])
})
})
javascript reactjs redux jestjs
javascript reactjs redux jestjs
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
asked Nov 23 '18 at 20:16
BARNOWLBARNOWL
4841821
4841821
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The problem is that you're expanding the previous state prior to adding the new post...
change your reducer to this:
return [post, ...state];
The way you wrote it... the new post is placed at the end of the state array. If you want the new post to show up first this will fix the issue.
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
add a comment |
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%2f53452505%2fredux-jest-is-not-receiving-value-as-expected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem is that you're expanding the previous state prior to adding the new post...
change your reducer to this:
return [post, ...state];
The way you wrote it... the new post is placed at the end of the state array. If you want the new post to show up first this will fix the issue.
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
add a comment |
The problem is that you're expanding the previous state prior to adding the new post...
change your reducer to this:
return [post, ...state];
The way you wrote it... the new post is placed at the end of the state array. If you want the new post to show up first this will fix the issue.
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
add a comment |
The problem is that you're expanding the previous state prior to adding the new post...
change your reducer to this:
return [post, ...state];
The way you wrote it... the new post is placed at the end of the state array. If you want the new post to show up first this will fix the issue.
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
The problem is that you're expanding the previous state prior to adding the new post...
change your reducer to this:
return [post, ...state];
The way you wrote it... the new post is placed at the end of the state array. If you want the new post to show up first this will fix the issue.
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
edited Nov 23 '18 at 20:25
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
answered Nov 23 '18 at 20:20
bluetoftbluetoft
4,62121522
4,62121522
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
add a comment |
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
wow, thanks it works. I'm new to unit testing redux and react, what resources you recommend people like myself to go to ? Besides the resources you linked to. I will accept in 6 minutes
– BARNOWL
Nov 23 '18 at 20:25
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
I have steered people towards code academy in the past. codecademy.com/learn/react-101
– bluetoft
Nov 26 '18 at 4:34
add a comment |
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.
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%2f53452505%2fredux-jest-is-not-receiving-value-as-expected%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
