Enzyme - тестовая функция-обработчик событий, которой нужно произвольное свойство `target` - PullRequest
Новая
       29

Enzyme - тестовая функция-обработчик событий, которой нужно произвольное свойство `target`

0 голосов
/ 30 мая 2019

Отказ от ответственности: я использую Preact в качестве библиотеки и enzyme-adapter-preact-pure в качестве адаптера фермента.

Я написал следующую функцию: 

function handleInputChange(e) {
  const target = e.target,
    value = target.type === 'checkbox' ? target.checked : target.value;
  this.setState({ [target.name]: value });
}

Эта функция автономна и предназначена для использования внутри React Подобные экземпляры компонентов: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null
    };

    this.handleInputChange = handleInputChange.bind(this);
  }

  render() {
    return <input name="name" onChange={this.handleInputChange} />;
  }
}

Таким образом, мне не нужно переопределять его для каждого компонента, который должен обрабатывать входные изменения.

Проблема:

Поскольку я полагаюсь на event.target и его свойства, я не знаю, как проверить его с помощью Enzyme, потому что я не могу установить target и эти свойства так, как мне хочется: 

// Test file
// Consider `wrapper` as an instance of `App` shown above, mounted with Enzyme's `mount` function.

test('it changes the correspondent state key when input is changed', () => {
  wrapper.find('input').simulate('change', { target: { value: 'foo', name: 'name' } });
  expect(wrapper.state('name')).toEqual('foo');
});

Попытка это приводит к ошибке: TypeError: Cannot set property target of [object Event] which has only a getter at Function.assign (<anonymous>)

1 Ответ

0 голосов
/ 30 мая 2019

Поскольку вы полагаетесь не только на target.value, вам также необходимо пройти соответствующую имитацию, которая охватывает все ваши базы.

Ниже код должен разрешить его. 

wrapper.find('input').simulate('change', {
  target: {
    value: 'foo',
    name: 'name',
    checked: true,
    type: 'checkbox'
  }
});

// OR

// In this case there will be no checkbox found and this it wont look for checked value present or not
wrapper.find('input').simulate('change', {
  target: {
    value: 'foo',
    name: 'name'
  }
});
...