[Autocomplete] Testing, simulate change doesn't work.

[johnaagudelo0820]

I need to simulate an onChange event with enzyme to update a state's component that is not working, I share the component's code in order to be helped.

Component:

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
];

const Counter = () => {
  const [value, setValue] = useState({ title: 'The Godfather', year: 1972 });

  const handleAutocomplete = (e, item) => {
    setValue(item);
  }

  return (
    <>
      {value && (
        <p id="option">{value.title}</p>
      )}
      <Autocomplete
        id="combo-box-demo"
        name="tags"
        debug
        options={top100Films}
        getOptionLabel={option => option.title}
        onChange={handleAutocomplete}
        style={{ width: 300 }}
        renderInput={params => <TextField {...params} label="Combo box" variant="outlined" />}
      />
    </>
  )
}

---

test component.

import React from 'react';
import { mount } from 'enzyme';

import Counter from '../components/Counter';

describe('<Counter />', () => {

  it('shoult update component', () => {
    const wrapper = mount(<Counter />);
    const autocomplete = wrapper.find('input');
    console.log(autocomplete.debug());
    autocomplete.simulate('change', { target: { value: 'The Shawshank Redemption' }});
    wrapper.update();
    expect(wrapper.find('p').text()).toEqual('The Shawshank Redemption');
  });
});

We use GitHub issues exclusively as a bugs and feature request tracker.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

[bbigras]

Any workaround for this? Or maybe it's not an issue anymore.

#18251

EDIT: I think I can find what I need in #18251

[oliviertassinari]

Duplicate of #18251