import React, { Component } from 'react';
import MultiSelectComponent from '../../shared/MultiSelectComponent';
export default class FileDetailsComponent extends Component {
constructor(props) {
super(props);
this.myFormRef = React.createRef();
}
render() {
const {handleInputChange allCustomers,isEditMode} = this.props;
return (
{!isEditMode ?
<span className="form-control disabled">{this.getCustomersToShow()}</span>
:
allCustomers && allCustomers.length ?
<MultiSelectComponent
id="customer"
data-testid="customer"
noChipsView={true}
hasSelectAll={true}
disabled={!isEditMode}
dropdownContent="customers"
className={`multiselect-wrap ${formErrors && formErrors.customers ? 'has-error' : ''}`}
options={allCustomers}
selectedValues={editObj.customers}
handleSelectChange={(selectedItems) => handleInputChange('customers', selectedItems)}
placeholder="Select Customer(s)"
/>
: <span className="form-control disabled">{fileDetails.customers ?
this.getCustomersToShow() : 'N/A'}</span>
}
I am new to React Testing Library
Please write unit test using RTL for this handleSelectChange
prop function. I am unable to cover this function. I am trying to use the getByTestId
for finding the customer
. i can able to file but after firEvent on handleInputChange it's showing received 0
This is my test case. here received is showing 0. please correct this test case!
describe('FileDetailsComponent', () => {
it('should call handleInputChange with selected items', () => {
const mockHandleInputChange = jest.fn();
const allCustomers = [
{ label: 'Customer 1', value: '1' },
{ label: 'Customer 2', value: '2' },
{ label: 'Customer 3', value: '3' }
];
const selectedItems = [allCustomers[0], allCustomers[2]]; //
Example of selected items
const { getByTestId } = render(
<MemoryRouter>
<Provider store={store}>
<FileDetailsComponent
editObj={editObj}
handleInputChange={mockHandleInputChange}
handleSelectChange={mockHandleInputChange}
fileDetails={fileDetails}
loading={false}
allCustomers={allCustomers}
isEditMode={true}
/>
</Provider>
</MemoryRouter>
);
const multiSelect = screen.getByTestId('customer');
console.log("multiSelect", multiSelect);
fireEvent.change(multiSelect, { target: { selectedOptions:
selectedItems } });
expect(multiSelect).toBeInTheDocument();
expect(mockHandleInputChange).toHaveBeenCalledWith('customers',
selectedItems);
});
});