Redux Jest is not receiving value as expected












0















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
}
])
})
})









share|improve this question



























    0















    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
    }
    ])
    })
    })









    share|improve this question

























      0












      0








      0








      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
      }
      ])
      })
      })









      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 23 '18 at 20:16









      BARNOWLBARNOWL

      4841821




      4841821
























          1 Answer
          1






          active

          oldest

          votes


















          1














          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.






          share|improve this answer


























          • 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











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          1














          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.






          share|improve this answer


























          • 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
















          1














          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.






          share|improve this answer


























          • 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














          1












          1








          1







          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 23 '18 at 20:25

























          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



















          • 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




















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          404 Error Contact Form 7 ajax form submitting

          How to know if a Active Directory user can login interactively

          TypeError: fit_transform() missing 1 required positional argument: 'X'