Enzyme test for empty array on componentWillUnMount dispatch action









up vote
0
down vote

favorite












I'm trying to test whether the redux store changes to an empty array by checking the props on the container when I dispatch and action on componentWillUnMount.



So I mean, test the change ["foo", "bar"] from my redux reducer to an empty array .



My code looks as follows:



Container:






import React, Component from 'react';
import connect from 'react-redux';
import * as actions from '../../store/actions/actions';

class MyComponent extends Component


 componentWillUnmount()
 this.props.cleanSearch();
 

 render()
 
 return(
 <div>
 
 Whatever
 </div>
 )
 


const mapStateToProps = state=>
 const itemsSearched = state.itemsSearched;
 return
 itemsSearched
 


const mapDispatchToProps = dispatch =>

 return
 cleanSearch: ()=> dispatch(actions.cleanSearch())
 


export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





My reducer:






import 
 CLEAN_SEARCH
 from '../actions/types';

import * as utils from '../../utils/udpaterState';

const initialState = 
 itemsSearched: ["foo", "bar"]


const reducer= (prevState = initialState, action)=>
 let newState = null;
 switch(action.type)
 case CLEAN_SEARCH:
 newState = itemsSearched: 
 return utils.updaterState(prevState, newState);
 default:
 return prevState;
 



export default reducer;





And my test code looks like this:



MyComponent.test.js






it('cleans redux prop searches when componentWillUnMount is called', ()=>
 const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
 const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
 expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
 wrapper.instance().componentWillUnmount();
 expect(wrapper.props().itemsSearched).toEqual();

 )





However what I receive is the ["foo", "bar"] array instead of the empty expected one.






reactjs jestjs enzyme







share|improve this question



























    up vote
    0
    down vote

    favorite












    I'm trying to test whether the redux store changes to an empty array by checking the props on the container when I dispatch and action on componentWillUnMount.



    So I mean, test the change ["foo", "bar"] from my redux reducer to an empty array .



    My code looks as follows:



    Container:






    import React, Component from 'react';
    import connect from 'react-redux';
    import * as actions from '../../store/actions/actions';

    class MyComponent extends Component


     componentWillUnmount()
     this.props.cleanSearch();
     

     render()
     
     return(
     <div>
     
     Whatever
     </div>
     )
     


    const mapStateToProps = state=>
     const itemsSearched = state.itemsSearched;
     return
     itemsSearched
     


    const mapDispatchToProps = dispatch =>

     return
     cleanSearch: ()=> dispatch(actions.cleanSearch())
     


    export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





    My reducer:






    import 
     CLEAN_SEARCH
     from '../actions/types';

    import * as utils from '../../utils/udpaterState';

    const initialState = 
     itemsSearched: ["foo", "bar"]


    const reducer= (prevState = initialState, action)=>
     let newState = null;
     switch(action.type)
     case CLEAN_SEARCH:
     newState = itemsSearched: 
     return utils.updaterState(prevState, newState);
     default:
     return prevState;
     



    export default reducer;





    And my test code looks like this:



    MyComponent.test.js






    it('cleans redux prop searches when componentWillUnMount is called', ()=>
     const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
     const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
     expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
     wrapper.instance().componentWillUnmount();
     expect(wrapper.props().itemsSearched).toEqual();

     )





    However what I receive is the ["foo", "bar"] array instead of the empty expected one.






    reactjs jestjs enzyme







    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm trying to test whether the redux store changes to an empty array by checking the props on the container when I dispatch and action on componentWillUnMount.



      So I mean, test the change ["foo", "bar"] from my redux reducer to an empty array .



      My code looks as follows:



      Container:






      import React, Component from 'react';
      import connect from 'react-redux';
      import * as actions from '../../store/actions/actions';

      class MyComponent extends Component


       componentWillUnmount()
       this.props.cleanSearch();
       

       render()
       
       return(
       <div>
       
       Whatever
       </div>
       )
       


      const mapStateToProps = state=>
       const itemsSearched = state.itemsSearched;
       return
       itemsSearched
       


      const mapDispatchToProps = dispatch =>

       return
       cleanSearch: ()=> dispatch(actions.cleanSearch())
       


      export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





      My reducer:






      import 
       CLEAN_SEARCH
       from '../actions/types';

      import * as utils from '../../utils/udpaterState';

      const initialState = 
       itemsSearched: ["foo", "bar"]


      const reducer= (prevState = initialState, action)=>
       let newState = null;
       switch(action.type)
       case CLEAN_SEARCH:
       newState = itemsSearched: 
       return utils.updaterState(prevState, newState);
       default:
       return prevState;
       



      export default reducer;





      And my test code looks like this:



      MyComponent.test.js






      it('cleans redux prop searches when componentWillUnMount is called', ()=>
       const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
       const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
       expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
       wrapper.instance().componentWillUnmount();
       expect(wrapper.props().itemsSearched).toEqual();

       )





      However what I receive is the ["foo", "bar"] array instead of the empty expected one.






      reactjs jestjs enzyme







      share|improve this question















      I'm trying to test whether the redux store changes to an empty array by checking the props on the container when I dispatch and action on componentWillUnMount.



      So I mean, test the change ["foo", "bar"] from my redux reducer to an empty array .



      My code looks as follows:



      Container:






      import React, Component from 'react';
      import connect from 'react-redux';
      import * as actions from '../../store/actions/actions';

      class MyComponent extends Component


       componentWillUnmount()
       this.props.cleanSearch();
       

       render()
       
       return(
       <div>
       
       Whatever
       </div>
       )
       


      const mapStateToProps = state=>
       const itemsSearched = state.itemsSearched;
       return
       itemsSearched
       


      const mapDispatchToProps = dispatch =>

       return
       cleanSearch: ()=> dispatch(actions.cleanSearch())
       


      export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





      My reducer:






      import 
       CLEAN_SEARCH
       from '../actions/types';

      import * as utils from '../../utils/udpaterState';

      const initialState = 
       itemsSearched: ["foo", "bar"]


      const reducer= (prevState = initialState, action)=>
       let newState = null;
       switch(action.type)
       case CLEAN_SEARCH:
       newState = itemsSearched: 
       return utils.updaterState(prevState, newState);
       default:
       return prevState;
       



      export default reducer;





      And my test code looks like this:



      MyComponent.test.js






      it('cleans redux prop searches when componentWillUnMount is called', ()=>
       const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
       const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
       expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
       wrapper.instance().componentWillUnmount();
       expect(wrapper.props().itemsSearched).toEqual();

       )





      However what I receive is the ["foo", "bar"] array instead of the empty expected one.






      import React, Component from 'react';
      import connect from 'react-redux';
      import * as actions from '../../store/actions/actions';

      class MyComponent extends Component


       componentWillUnmount()
       this.props.cleanSearch();
       

       render()
       
       return(
       <div>
       
       Whatever
       </div>
       )
       


      const mapStateToProps = state=>
       const itemsSearched = state.itemsSearched;
       return
       itemsSearched
       


      const mapDispatchToProps = dispatch =>

       return
       cleanSearch: ()=> dispatch(actions.cleanSearch())
       


      export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





      import React, Component from 'react';
      import connect from 'react-redux';
      import * as actions from '../../store/actions/actions';

      class MyComponent extends Component


       componentWillUnmount()
       this.props.cleanSearch();
       

       render()
       
       return(
       <div>
       
       Whatever
       </div>
       )
       


      const mapStateToProps = state=>
       const itemsSearched = state.itemsSearched;
       return
       itemsSearched
       


      const mapDispatchToProps = dispatch =>

       return
       cleanSearch: ()=> dispatch(actions.cleanSearch())
       


      export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);





      import 
       CLEAN_SEARCH
       from '../actions/types';

      import * as utils from '../../utils/udpaterState';

      const initialState = 
       itemsSearched: ["foo", "bar"]


      const reducer= (prevState = initialState, action)=>
       let newState = null;
       switch(action.type)
       case CLEAN_SEARCH:
       newState = itemsSearched: 
       return utils.updaterState(prevState, newState);
       default:
       return prevState;
       



      export default reducer;





      import 
       CLEAN_SEARCH
       from '../actions/types';

      import * as utils from '../../utils/udpaterState';

      const initialState = 
       itemsSearched: ["foo", "bar"]


      const reducer= (prevState = initialState, action)=>
       let newState = null;
       switch(action.type)
       case CLEAN_SEARCH:
       newState = itemsSearched: 
       return utils.updaterState(prevState, newState);
       default:
       return prevState;
       



      export default reducer;





      it('cleans redux prop searches when componentWillUnMount is called', ()=>
       const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
       const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
       expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
       wrapper.instance().componentWillUnmount();
       expect(wrapper.props().itemsSearched).toEqual();

       )





      it('cleans redux prop searches when componentWillUnMount is called', ()=>
       const spy = jest.spyOn(MyComponent.prototype, 'componentWillUnmount');
       const wrapper = mount(<MyComponent store=storeUtil itemsSearched=mocks.itemsSearched() />);
       expect(wrapper.props().itemsSearched).toEqual(mocks.itemsSearched());
       wrapper.instance().componentWillUnmount();
       expect(wrapper.props().itemsSearched).toEqual();

       )





      reactjs jestjs enzyme




      reactjs jestjs enzyme






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 2 days ago









      LazerBass

      1,2183921




      1,2183921










      asked Nov 10 at 12:10









      jaymate

      83




      83






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          its confusing because you have all caps CLASS_CASE and camelCase too... shouldn't the switch case be cleanSearch and not case CLEAN_SEARCH becasue you're calling it via mapDispatchToProps so like this:



          import 
           CLEAN_SEARCH
           from '../actions/types';

          import * as utils from '../../utils/udpaterState';

          const initialState = 
           itemsSearched: ["foo", "bar"]


          const reducer= (prevState = initialState, action)=>
           let newState = null;
           switch(action.type)
           case cleanSearch:
           newState = itemsSearched: 
           return utils.updaterState(prevState, newState);
           default:
           return prevState;
           



          export default reducer;





          share|improve this answer




















            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',
            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%2f53238807%2fenzyme-test-for-empty-array-on-componentwillunmount-dispatch-action%23new-answer', 'question_page');

            );

            Post as a guest

















            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            its confusing because you have all caps CLASS_CASE and camelCase too... shouldn't the switch case be cleanSearch and not case CLEAN_SEARCH becasue you're calling it via mapDispatchToProps so like this:



            import 
             CLEAN_SEARCH
             from '../actions/types';

            import * as utils from '../../utils/udpaterState';

            const initialState = 
             itemsSearched: ["foo", "bar"]


            const reducer= (prevState = initialState, action)=>
             let newState = null;
             switch(action.type)
             case cleanSearch:
             newState = itemsSearched: 
             return utils.updaterState(prevState, newState);
             default:
             return prevState;
             



            export default reducer;





            share|improve this answer
























              up vote
              0
              down vote













              its confusing because you have all caps CLASS_CASE and camelCase too... shouldn't the switch case be cleanSearch and not case CLEAN_SEARCH becasue you're calling it via mapDispatchToProps so like this:



              import 
               CLEAN_SEARCH
               from '../actions/types';

              import * as utils from '../../utils/udpaterState';

              const initialState = 
               itemsSearched: ["foo", "bar"]


              const reducer= (prevState = initialState, action)=>
               let newState = null;
               switch(action.type)
               case cleanSearch:
               newState = itemsSearched: 
               return utils.updaterState(prevState, newState);
               default:
               return prevState;
               



              export default reducer;





              share|improve this answer






















                up vote
                0
                down vote










                up vote
                0
                down vote









                its confusing because you have all caps CLASS_CASE and camelCase too... shouldn't the switch case be cleanSearch and not case CLEAN_SEARCH becasue you're calling it via mapDispatchToProps so like this:



                import 
                 CLEAN_SEARCH
                 from '../actions/types';

                import * as utils from '../../utils/udpaterState';

                const initialState = 
                 itemsSearched: ["foo", "bar"]


                const reducer= (prevState = initialState, action)=>
                 let newState = null;
                 switch(action.type)
                 case cleanSearch:
                 newState = itemsSearched: 
                 return utils.updaterState(prevState, newState);
                 default:
                 return prevState;
                 



                export default reducer;





                share|improve this answer












                its confusing because you have all caps CLASS_CASE and camelCase too... shouldn't the switch case be cleanSearch and not case CLEAN_SEARCH becasue you're calling it via mapDispatchToProps so like this:



                import 
                 CLEAN_SEARCH
                 from '../actions/types';

                import * as utils from '../../utils/udpaterState';

                const initialState = 
                 itemsSearched: ["foo", "bar"]


                const reducer= (prevState = initialState, action)=>
                 let newState = null;
                 switch(action.type)
                 case cleanSearch:
                 newState = itemsSearched: 
                 return utils.updaterState(prevState, newState);
                 default:
                 return prevState;
                 



                export default reducer;






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 10 at 12:30









                Frankenmint

                7341622




                7341622



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238807%2fenzyme-test-for-empty-array-on-componentwillunmount-dispatch-action%23new-answer', 'question_page');

                    );

                    Post as a guest

































































                    -

                    Popular posts from this blog

                    Top Tejano songwriter Luis Silva dead of heart attack at 64

                    Image
                    Ramiro Burr's New Blog - to go back: www.ramiroburr.com From Latin rock to reggaeton, boleros to blues,Tex-Mex to Tejano, conjunto to corridos and beyond, Ramiro Burr has it covered. If you have a new CD release, a trivia question or are looking for tour info, post a message here or e-mail Ramiro directly at: musicreporter@gmail.com Top Tejano songwriter Luis Silva dead of heart attack at 64 By Ramiro Burr on October 23, 2008 8:40 AM | Permalink | Comments (12) | TrackBacks (0) UPDATE: Luis Silva Funeral Service details released Visitation 4-9 p.m. Saturday, Rosary service 6 p.m. Saturday at Porter Loring, 1101 McCullough Ave Funeral Service 10:30 a.m. Monday St. Anthony De Padua Catholic Church, Burial Service at Chapel Hills, 7735 Gibbs Sprawl Road. Porter Loring (210) 227-8221 Related New Flash: Irma Laura Lopez: long time record promoter killed in accident NewsFlash: 9:02 a.m. (New comments below) Luis Silva , one of the most well-known and prolif
                    Read more

                    ReactJS Fetched API data displays live - need Data displayed static

                    Image
                    .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box; 0 I'm fetching data from API with axios which is live (counters, date and time etc.). When I display it, browser gets not responding because it gets a lot of requests. What I need just get a first snapshot of live data. Same goes for: var date = new Date; return (<p>date.toLacaleString()</p>) It gets live time (ticking every second) :D I just need date and time at that moment when it gets requested (snapshot). reactjs date time static axios share | improve this question edited Nov 16 '18 at 16:18 Sung M. Kim 17.9k 33 112 165 asked Nov 16 '18 at 13:39 Laurynas Žilinskas Laurynas Žilinskas 8 4 add a comment  |  0 I'm fetching data from API with axios which is live (counters, date and time etc.). When I display it, brow
                    Read more

                    Evgeni Malkin

                    Image
                    Evgeni Malkin From Wikipedia, the free encyclopedia Jump to navigation Jump to search This name uses Eastern Slavic naming customs; the patronymic is Vladimirovich and the family name is Malkin . Evgeni Malkin Malkin during the 2017 Stanley Cup Finals Born ( 1986-07-31 ) 31 July 1986 (age 32) Magnitogorsk, Russian SFSR, Soviet Union Height 6 ft 3 in (191 cm) Weight 195 [1]  lb (88 kg; 13 st 13 lb) Position Centre Shoots Left NHL team Former teams Pittsburgh Penguins Metallurg Magnitogorsk National team   Russia NHL Draft 2nd overall, 2004 Pittsburgh Penguins Playing career 2003–present Website http://malkin71.com Yevgeni Vladimirovich "Geno" Malkin (Russian: Евге́ний Влади́мирович Ма́лкин , IPA:  [jɪvˈɡʲenʲɪj ˈmaɫkʲɪn] ; [2] [3] born 31 July 1986) is a Russian professional ice hockey centre and alternate captain for the Pittsburgh Penguins of the National Hockey League (NHL). Malkin began his career with his hometown club Me
                    Read more