React-Enzyme testing- DropDown not rendering properly - enzyme

Question

I have a React DropDown
import React from 'react'
import PropTypes from 'prop-types'
import {FormGroup, ControlLabel, FormControl} from 'react-bootstrap'
class dropDown extends React.Component {
static defaultProps = {
inputValue: '',
dropdownText: 'Dropdown'
};
static propTypes = {
dropdownText: PropTypes.string.isRequired
};
constructor (props) {
super(props)
this.state = {inputValue: ''}
}
render () {
return <div>
<FormGroup controlId="locale-value">
<ControlLabel>{this.props.dropdownText}</ControlLabel>
<FormControl componentClass="select" value={this.state.inputValue}>
<option value="1">1</option>
<option value="2">2</option>
</FormControl>
</FormGroup>
</div>
}
}
export default dropDown
I am now trying to test it using Enzyme
import React from 'react'
import ReactDOM from 'react-dom'
import LocaleDropDown from './LocaleDropDown'
import ReactTestUtils from 'react-dom/test-utils'
import {FormGroup, ControlLabel, FormControl} from 'eui-components'
import { shallow, mount } from 'enzyme'
import renderer from 'react-test-renderer'
/*
* Verify that the app can be rendered without any fatal errors.
*/
describe('<dropDown/> component', () => {
it('renders the Select component', () => {
const div = document.createElement('div')
const wrapper = ReactDOM.render(<LocaleDropDown />, div)
console.log(wrapper.find('select').length.to.equal(1));
});
});
It says wrapper.find is not a function.
Since I am rendering, I was expecting the dropdown to be rendered and able to access all the options inside.

Answer 1

This could be a naming issue. You don't show where you've defined the LocaleDropDown component. Your first file only exports a component called dropDown.
Assuming that the first file is named LocaleDropDown, you should change the import statement at the top of the test file.
import dropDown from './LocaleDropDown'
For what it's worth, I would use the enzyme shallow function to mount the component, seeing as how you're already importing it.
Your test could look something like:
/*
* Verify that the app can be rendered without any fatal errors.
*/
describe('<dropDown/> component', () => {
const dropDown = () => {
return shallow(<dropDown />);
}
it('renders the Select component', () => {
const select = dropDown().find('select');
expect(select.length).toEqual(1);
});
});