Условно-реактивный рендеринг юнит-теста

Question

Я пытаюсь написать несколько юнит-тестов для React + Redux с Jest и Enzyme.

Я немного застрял в том, как написать модульные тесты в контейнере условного рендеринга.

...
 const {loading} = this.props

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

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

Я уже протестировал некоторые обычные средства рендеринга, но сейчас мне нужно протестировать некоторую «загрузку контента»

В моем тестовом файле я пытаюсь обновить содержимое магазина до {loading: false}так как начальное состояние редуктора - {loading: true}, но я его не сделал.

Я также использую redux-mock-store, чтобы попытаться смоделировать хранилище, как указано в следующих ссылках, но никакого прогресса не было.

https://github.com/dmitry-zaets/redux-mock-store/issues/85 и Redux Как обновить магазин в модульных тестах?

мой тестовый файл выглядит примерно так:

describe('render', ()=>{

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

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

Если вам, ребята, нужна дополнительная информация, пожалуйста, дайте мне знать,

Заранее спасибо.

Answer 1

Я много читал об этой проблеме, и в конечном итоге этот фрагмент кода решит мою проблему.

Пожалуйста, если вы, ребята, найдете какой-нибудь лучший способ сделать это, дайте мне знать.

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