I am trying to write a unit test case for material UI multi select.
Parent component code is -
import {myData} from '../constant';
export const Parent = () => {
const onChangeStatus= (selectedValues: Array<string>) => {
setTest({
...test,
values: selectedValues
});
}
return (
<Child
onChange={onChangeStatus}
myData={test}
/>
);
}
Child Component code is -
import React from 'react'
export interface ChildProps {
onChangeStatus: (values: Array<string>) => void;
myData?: Array<Test<string, string>> | null;
}
export const Child = ({onChangeStatus , myData}: ChildProps) => {
return (
<div>
<MultiSelect
multiple
native
value={myData.val}
onChange={(event: React.ChangeEvent<HTMLSelectElement>): void => {
const { selectedOptions } = event.target;
let values: string[] = Array.from(selectedOptions).map(selectedOption => selectedOption.value);
onChangeStatus(values);
}}>
{myData &&
myData.multiSelectData &&
myData.multiSelectData.map(
(item: Test<string, string>) => (
<option key={item.key} value={item.value}>
{item.key.replace('_',' ')}
</option>
)
)}
</MultiSelect>
</div>
);
}
This is what I have written the test cases -
it('should call onChange handler when test multi select is selected', () => {
const event = {target: { value: 'All', key: 'All' }};
wrapper
.find(MultiSelect)
.first()
.props()
.onChange('test', event);
expect(mockOnChange).toHaveBeenCalled();
});
This test case is failing. Getting error like - TypeError: Cannot read property 'selectedOptions' of undefined
. Also code is not covered for this function.
Can anyone help me in that to pass the test case and get 100% code coverage for multi select.