Mocking of material-ui select component with jest

Question

I created a React component which i'm trying to test with React Testing Library. In my component i have following select component and its change handler

Component.jsx

<SingleSelect
  name="filter"
  label="Status"
  value={this.state.weatherStatus}
  options={this.state.weatherStatusOptions}
  onChange={this.handleFilterChange}
  testId="status"
/>

onChange handleFilterChange function

handleFilterChange = (event) => {
  this.setState({ weatherStatus: event.value });
}

An example of passing value this.state.weatherStatus is { id: 1, text: "cool weather"} For this I tried to write a mockup like below.

jest.mock('@material-ui/core/Select', () => props => (
  <div>
    <input
      onChange={(e) => props.onChange({ target: { value: e.target.value }})}
      value={props.value}
      data-testid={props['data-testid']}
    />
    {props.children}
  </div>
));

fireEvent.change(getByTestId('select'), { target: { value: { id: 1, text: "cool" } } });
expect(getByTestId('select').value).toEqual({ id: 1, text: "cool" });

But it is not working at all. any suggestion?

Answer 1

it's definitely possible. I just managed to cracked it.

jest.mock('@material-ui/core/Select', () => (...rest)=> {
   return(  
     <div>
       <input
         data-testid='mock-component'
       />
   </div>
   )
 });

You just need to put it above the describe.