Autocomplete Mui Testing, симуляция изменений не работает - PullRequest
4 голосов
/ 27 февраля 2020

Мне нужно смоделировать событие 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');
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...