React Unit Test expect/nwb how to simulate componentDidMount

48 Views Asked by At

I have my InputLocation Component with children:

  • InputName
  • DrawLocation

I want to make some unit test to check my component, but I have a problem with simulating componentDidMount cycle. InputName component depends on and displays when DrawLocation is mounted. See below please:

input-location.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>
        )
    }
}

And a small piece of DrawLocation component to show where is onMount handlers there.

draw-location.js

class DrawLocation extends React.PureComponent {

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

        handlers.onMount && handlers.onMount()
    }

    ...

    render() {

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

I've started to create some test using nwb and expect

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', () => {
        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()
    })
})

First and second test is OK and give me positive results, but the last one failed.

Please about your help to solve the issue.

0

There are 0 best solutions below