CODEWITHSUNDEEP
reactjsunit-testingreduxjestjsenzyme
Michael Fernandes
Michael Fernandes

Reputation: 111

Conditional React render unit test

I'm trying to write some unit tests on React + Redux with Jest and Enzyme.

I'm kinda stuck on how I can write unit tests in a conditional rendering container.

...
 const {loading} = this.props

    if (loading) {
        return(
            <LoadingModal
              //Loading content
            />
        )
    }

    return(<div>//Regular APP</div>)
...

I'm already tested some regular render stuff, but right now I have to test some "loading content"

On my test file, I'm trying to update the store content to {loading: false} since the reducer initial state is {loading: true}, but I did not make it.

I'm also using redux-mock-store to try mock the store, as indicated on the following links but no progress was made.

https://github.com/dmitry-zaets/redux-mock-store/issues/85 and Redux How to update the store in unit tests?

my test file looks something like that:

describe('render', ()=>{

    beforeEach(()=>{
        ...
    })

    it('Loading rendered',()=>{
        expect(wrapped.find(LoadingModal).length).toEqual(1)
    })
})

If you guys need more information, please let me know,

Thanks in advance.

Upvotes: 0

Views: 1441

Answers (1)

Michael Fernandes
Michael Fernandes

Reputation: 111

I'm read a lot about this issue, and ultimately this follow piece of code resolve my problem.

Please, if you guys find some better way to do it, let me know.

import configureMockStore           from 'redux-mock-store'
import thunk                        from 'redux-thunk'
import {Provider}                   from 'react-redux';

...

let wrapped

describe('render loading', () =>{

    const mockStore = configureMockStore([thunk])

    const store = mockStore({
        loading: true
    })

    beforeEach(()=>{
        wrapped = mount(
            <Provider store={store}>
                <App/>
            </Provider>
        )
    })

    it('rendered loading',()=>{
        expect(wrapped.find(LoadingModal).length).toEqual(1)
    })
  })

Upvotes: 1

Related Questions