Question

我正在尝试使用Jest和Enzyme在React + Redux上编写一些单元测试。

我对如何在条件渲染容器中编写单元测试颇感困惑。

...
 const {loading} = this.props

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

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

我已经测试了一些常规渲染器，但是现在我必须测试一些“加载内容”

在我的测试文件上，由于reducer的初始状态为{loading: false}，所以我试图将商店内容更新为{loading: true}，但我没有做到。

我还使用redux-mock-store尝试模拟商店，如以下链接所示，但未取得任何进展。

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

我的测试文件看起来像这样：

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

条件React渲染单元测试

1 个答案: