0
  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 handleSelectChangeprop 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);
 });
});
preeti raj
  • 73
  • 7

0 Answers0