Ошибка типа: e.persist не является функцией в Typeahead Bootstrap React - PullRequest
Новая
       25

Ошибка типа: e.persist не является функцией в Typeahead Bootstrap React

0 голосов
/ 13 марта 2020

Я получаю сообщение об ошибке TypeError: e.persist is not a function при попытке попробовать разные методы для тестирования моего приложения в Enzyme, но, похоже, ничего не работает.

input.prop ('onChange') ({target: {value: "valuehere", имя: "namehere", заполнитель: "placeholderhere"}});

input.simulate ('change', {target: {value: "valuehere", name: "namehere", заполнитель : "placeholderhere"}});

input.props (). onChange ({target: {value: "valuehere", name: "namehere", placeholder: "placeholderhere"}});

Мой код: 

import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

export interface InputFormProps {
    label: string;
    id: string;
    icon: string;
    input: any;
    value: string[];
}

export default class InputForm extends React.Component<InputFormProps> {

  state = {
    value: this.props.value, list: []
   }


  async componentDidMount() {
    // API Calls happen here, not relevant
  }


  change = (value, label) => {
        //Converts to a form that the upper function understands from events
        let result = { target: {value, placeholder: label}};
        this.props.input(result);
      }

  render () {


    //Doesn't render list unless it has loaded

    return(
        <Typeahead
          multiple
          selected={this.props.value}
          name={this.props.label}
          type="text"
          className="form-control"
          placeholder={this.props.label}
          id={this.props.id}
          onChange={e => this.change(e, this.props.label)}
          options={this.state.list}/>
    )

  }

}

Обратите внимание, что некоторые значения изменены, чтобы защитить конфиденциальность работы моей компании.

Ответы [ 2 ]

1 голос
/ 13 марта 2020

Библиотека, похоже, использует дополнительные функции / свойства в объекте события. Если тестирование не зависит от того, работает ли он точно так же, как в браузере, вы можете отключить то, что используется с чем-то вроде следующего: 

input.prop('onChange')({
  persist: jest.fn(),
  target: { value: "valuehere", name: "namehere", placeholder: "placeholderhere" }
});
0 голосов
/ 14 марта 2020

@ Решение BrianMitchL для насмешки метода persist является хорошим, но важно добавить небольшой контекст о системе событий React и о том, почему вы видите поведение в первую очередь. События, передаваемые обработчикам в компонентах React, не являются собственными событиями браузера:

В ваши обработчики событий будут переданы экземпляры SyntheticEvent, кросс-браузерной оболочки вокруг собственного события браузера. Он имеет тот же интерфейс, что и собственное событие браузера, включая stopPropagation() и preventDefault(), за исключением того, что события работают одинаково во всех браузерах.

По соображениям производительности React объединяет эти события :

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

Если вы хотите получить доступ к свойствам события асинхронным способом, вы должны вызвать event.persist() для события, которое удалит синтезатор c событие из пула и разрешить сохранение ссылок на событие с помощью кода пользователя.

react-bootstrap-typeahead использует event.persist() для асинхронной передачи событий после установки внутреннего состояния. Например: 

handleBlur = (event) => {
  event.persist();
  this.setState({ isFocused: false }, () => this.props.onBlur(event));
}

Вообще говоря, если в фиктивном событии, которое вы проходите в своем тесте, отсутствует атрибут, используемый в тестируемом коде, вы получите похожую ошибку. Как и в ответе @ BrianMitchL, вы можете просто смоделировать атрибут: 

input.prop('onChange')({
  defaultPrevented: false,
  persist: () => {},
  stopPropagation: () => {},
  target: { ... }
});
...