React Unit Test expect/nwb 如何模拟 componentDidMount

如何解决React Unit Test expect/nwb 如何模拟 componentDidMount

我有带孩子的 InputLocation 组件：

• 输入名称
• 绘制位置

我想进行一些单元测试来检查我的组件，但是我在模拟 componentDidMount 循环时遇到了问题。 InputName 组件依赖于并在 DrawLocation 挂载时显示。请看下面：

输入位置.js

class InputLocation extends React.Component {

    state = {
        isMapReady: false
    }

    setMapReady = () => this.setState({ isMapReady: true })

    onScrollTop = () => {
        const { handlers } = this.props

        handlers.onScrollTop && handlers.onScrollTop()
    }

    render() {
        const {
            autoFocus,captionTip,children,id,handlers,trackEvents,mapId,value,coordinates,inputNameErrorMessage,isNameError
        } = this.props

        const { isMapReady } = this.state

        return (
            <div className='input-location'>
                <div className='input-location__module'>
                    {!!isMapReady && (
                        <InputName
                            autoFocus={autoFocus}
                            caption={i18n.t('INPUT_LOCATION.NAME_LABEL')}
                            captionTip={captionTip}
                            id={id}
                            isError={isNameError}
                            handlers={handlers}
                            placeholder={i18n.t('INPUT_LOCATION.NAME_PLACEHOLDER')}
                            requiredMessage={inputNameErrorMessage}
                            value={value}
                        />
                    )}
                </div>

                {children}

                <div className='input-location__module'>
                    <DrawLocation
                        coordinates={coordinates}
                        mapId={mapId}
                        handlers={{
                            ...handlers,onMount: callAll(
                                this.setMapReady,this.onScrollTop
                            )
                        }}
                        trackEvents={trackEvents}
                    />
                </div>
            </div>
        )
    }
}

还有一小部分 DrawLocation 组件来显示那里的 onMount 处理程序。

绘制位置.js

class DrawLocation extends React.PureComponent {

    componentDidMount() {
        const { handlers } = this.props

        handlers.onMount && handlers.onMount()
    }

    ...

    render() {

        return (
            <div>
                Something...
            </div>
        )
    }
}

我已经开始使用 nwb 创建一些测试并期待

input-location-test.js

import expect from 'expect'

const containerPath = '.input-location'
const inputNamePath = '.input-location__name'
const errorPath = '.validation'

const injectInputLocation = require('inject-loader!./input-location')

const InputLocation = injectInputLocation({
    './input-name': () => <div className='input-location__name'></div>,'./tip': () => <div />,'cm/components/map/draw-location': ({ handlers,children }) => (
        <div className="map__container" handlers={handlers.onMount}>
            {children}
        </div>
    )
}).default

describe('InputLocation component',() => {
    let node

    beforeEach(() => {
        node = document.createElement('div')
    })

    afterEach(() => {
        ReactDOM.unmountComponentAtNode(node)
    })

    it('renders component',() => {
        ReactDOM.render(
            <InputLocation />,node
        )

        const container = node.querySelector(containerPath)

        expect(container).toExist()
    })

    it('doesn\'t render input-name if no properties specified',node
        )

        const elementNode = node.querySelector(inputNamePath)

        expect(elementNode).toNotExist()
    })

    it('renders input-name',() => {

        ReactDOM.render(
            <InputLocation
                handlers={{
                    onMount: () => {}
                }}
            />,node
        )

        const elementNode = node.querySelector(inputNamePath)

        expect(elementNode).toExist()
    })
})

第一次和第二次测试没问题，给了我积极的结果，但最后一次失败了。

请您帮忙解决问题。