ReactJS / Enzyme：如何在获取数据时测试容器

Question

如何用酶和摩卡咖啡测试反应容器？ 我正在使用容器为组件提供一些数据。 所以这就是我的容器和组件的样子：

/imports/ui/components/example.jsx

import React, { Component } from 'react'
import { Header, Divider, Container, Segment, Loader } from 'semantic-ui-react'

class Example extends Component {
    render() {
        const   { data, isLoading } = this.props,

        if (isLoading)
            return (<Loader active inverted size='massive' className='animated fadeIn' />)

        return (
            <Container text className='m-t-1 m-b-1 animated bounceInDown'>
                <Segment raised padded>
                    <Header as='h1' floated='right'>{ data.title }</Header>
                    <Divider clearing />
                </Segment>
            </Container>
        )
    }
}

/imports/ui/containers/example.jsx

import Example from '/imports/ui/components/example.jsx'

export default createContainer((props) => {
    const   id           = props.params.id,
            subscription = Meteor.subscribe('something', id),
            isLoading    = !subscription.ready(),
            data         = Collection.find().fetch()

    return {
        data: data,
        isLoading
    }
}, Example)

现在，我首先要测试是否显示<Loader />组件（如果根本没有加载数据）-到目前为止，该组件仍然有效。

import React from 'react'
import { mount } from 'enzyme'
import { expect } from 'chai'

// Import Container
import Example from '/imports/ui/containers/example.js'

describe('Example', () => {
    describe('component', () => {
        describe('<Example />', () => {
            it('should show the <Loader /> component by default', () => {
                const   wrapper     = mount(<Example params={ { id: 'ueRunYgz4gwHquiYK' } } />),
                        container   = wrapper.first('div'),
                        loader      = wrapper.find('Loader')

                expect(container).to.have.length(1)
                expect(loader).to.have.length(1)
            })

            it('should show the <Container /> component when data has loaded', () => {
                const   wrapper   = mount(<Example params={ { id: diseaseID } } />),
                        container = wrapper.find('Example')

                expect(container).to.have.length(1)
            })
        })
    })
})

但是第二次测试失败，因为我不知道如何将isLoading设置为false值

Answer 1

Example是以isLoading作为道具。 您可以使用prop isLoading={false}安装Example吗？

const wrapper = mount(
  <Example
    params={{id: diseaseID}}
    isLoading={false} 
  />
), container = wrapper.find('Example')