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 2 days ago

LazerBass

1,2163921

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 2 days ago

LazerBass

1,2163921

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 2 days ago

LazerBass

1,2163921

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 2 days ago

LazerBass

1,2163921

asked Nov 10 at 12:10

jaymate

edited 2 days ago

LazerBass

1,2163921

asked Nov 10 at 12:10

jaymate

edited 2 days ago

LazerBass

1,2163921

edited 2 days ago

LazerBass

1,2163921

edited 2 days ago

LazerBass

1,2163921

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

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

搜尋此網誌

Nrthugu