I am using React-bootrap-typeahead in my application with React 16,jest-junit": "^16.0.0" and enzyme: "^3.10.13". Here I am showing only a basic Typeahead component and its unit test since I cannot show the customised one.I am using jest and enzyme to write the unit test. In unit test I simulate a change on the input box and a options dropdown is populated and then we click on one of the options. In reality the the props value of the input changes to the selected one but it doesnt work.
Component
import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
const TypeAheadBox = () => {
const options = [{ name: 'Option 1', id: 1 },
{ name: 'Option 2', id: 2 }];
const [singleSelections, setSingleSelections] = useState([]);
return (
<div className="App">
<Typeahead
id="basic-typeahead-single"
labelKey="name"
onChange={setSingleSelections}
options={options}
placeholder="Choose a state..."
selected={singleSelections}
inputProps={{
"data-testid": 'my-typeahead-single'
}}
/>
</div>
);
}
export default TypeAheadBox;
Unit test
import React, { useState } from 'react';
import TypeAheadBox from './TypeAhead';
import { mount } from 'enzyme/build';
describe('<Typeaheadbox/>', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<TypeAheadBox />);
});
it('mounts without crashing', () => {
wrapper.unmount()
});
it('test the input change', () => {
const typeahead = wrapper.find('.rbt-input-main');
typeahead.simulate('click');
typeahead.simulate('change', { target: { value: "Option" } })
wrapper.update();
expect(wrapper.find("#basic-typeahead-single a.dropdown-item")).toHaveLength(2);
wrapper.find("#basic-typeahead-single a.dropdown-item").at(0).simulate('click');
wrapper.update();
expect(typeahead.prop('value')).toBe("Option 1");
})
})
This unit test fails at last line where the input value of typeahead is empty and doesnt update to be 'Option1'
This unit test doesn't work but the same works with new React 18 and new testing library. I also used testing library instead of enzyme with old React 16 for testing but still it doesn't work. Please help!