自动完成 Mui 测试，模拟更改不起作用

Posted 2023-02-21

【中文标题】自动完成 Mui 测试，模拟更改不起作用

【英文标题】：Autocomplete Mui Testing, simulate change doesn't work

【发布时间】：2020-06-11 20:55:54

【问题描述】：

我需要用酵素模拟一个 onChange 事件来更新一个不工作的状态组件，我分享组件的代码以便获得帮助。

组件：

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" />
      />
    </>
  )

测试组件。

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');
  );
);

【参考方案1】：

我无法为您提供 enzyme 的帮助，因为我不再使用它。部分原因是它在模拟事件方面不如其他库那么健壮。

我个人只使用@testing-library/react，这也是 Material-UI 正在使用的。然后就可以写了

const  getByRole  = render(<Counter />);
const autocomplete = getByRole('textbox');
fireEvent.change(autocomplete,  target:  value: 'The Shawshank Redemption'  );
expect(autocomplete.value).to.equal('The Shawshank Redemption');