1

我的 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 创建一些测试并期望

输入位置-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', () => {
        ReactDOM.render(
            <InputLocation />,
            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()
    })
})

第一次和第二次测试都可以，给我肯定的结果，但最后一次失败了。

请您帮忙解决问题。

4

0 回答 0