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.

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

add a comment |

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.

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

add a comment |

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.

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

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

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

edited Nov 11 at 7:10

LazerBass

1,22031021

edited Nov 11 at 7:10

LazerBass

1,22031021

edited Nov 11 at 7:10

LazerBass

1,22031021

asked Nov 10 at 12:10

jaymate

asked Nov 10 at 12:10

jaymate

asked Nov 10 at 12:10

jaymate

add a comment |

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;

answered Nov 10 at 12:30

Frankenmint

7341622

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',
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

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

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;

answered Nov 10 at 12:30

Frankenmint

7341622

add a comment |

up vote
0
down vote

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;

answered Nov 10 at 12:30

Frankenmint

7341622

add a comment |

up vote
0
down vote

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;

answered Nov 10 at 12:30

Frankenmint

7341622

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;

answered Nov 10 at 12:30

Frankenmint

7341622

answered Nov 10 at 12:30

Frankenmint

7341622

answered Nov 10 at 12:30

Frankenmint

7341622

answered Nov 10 at 12:30

Frankenmint

7341622

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj