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.