Conditional React render unit test

Question

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.

Your component gets `loading` from its props, you could just pass that in in your tests: `const wrapped = mount/shallow()` — Hamza El Aoutar, Oct 01 '19 at 01:36
My props come from: `const mapStateToProps = state => ({ loading: state.planets.loading })` Even when I pass: `wrapped = mount( )` My App continue to render only the loading version. — Michael Fernandes, Oct 01 '19 at 13:28

score 1 · Accepted Answer · answered Oct 01 '19 at 20:23

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

Conditional React render unit test

1 Answers1