Nano Hash - криптовалюты, майнинг, программирование

Реагировать на ввод при моделировании изменения без обновления значения с помощью Jest и фермента

У меня есть функциональный компонент, как показано ниже

const Input = () => {
  const [value, updateValue] = useState("");
  return (
    <input
      type="text"
      id="input"
      value={value}
      onChange={(e) => {
        updateValue(e.target.value);
      }}
    />
  );
};

export default Input;

и протестируйте, как показано ниже

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(input.prop("value")).toBe("Q");

проблема в том, что имитация события не обновляет состояние. Я тоже пробовал wrapper.update (), но он не работает.

вы можете запустить тест здесь

reactjs javascript jestjs single-page-application enzyme
27.09.2019

Ответы:


1

После обновления компонента ваша переменная input по-прежнему указывает на старую оболочку.

Обертки (кроме корневого) неизменяемы, поэтому вам нужно снова .find() element.

Итак, если вы

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(wrapper.find("input").prop("value")).toBe("Q");

вы получите это пройдено.

PS, наверное, безопаснее всегда избегать использования промежуточных переменных при тестировании с помощью Enzyme.

27.09.2019
  • оно работает. но когда я нахожу по идентификатору, и если у меня более одного входа, я получаю такую ​​ошибку в песочнице. codeandbox.io/s/input-unit-test-enzyme-2lp7i @skyboyer 27.09.2019
  • Вы создаете два входа с id="1" и id="2", но смотрите с помощью селектора "#heart". 27.09.2019
  • извините даже от души. я изменился в сердце 27.09.2019
  • поэтому ваш сторонний компонент отображается как <Input .... id="heart"> <input .... id="heart" /> </Input>. Вы можете увидеть это сами с console.log(input.debug()). Что ты можешь сделать? Вы можете более конкретно (.find("input#heart")) или взять только первый элемент (.find("#heart").at(0)). Или вы можете использовать shallow() вместо mount(). Или вы можете переключиться на react-testing-library (здесь используется другой подход) 27.09.2019

    • 2

    Для тех, у кого несколько входов, как в случае с @NishamMahsin. У меня была такая же проблема, и я нашел рабочее решение в оболочке, не обновленной после моделирования (' изменение'). # 1999

    Суммируя:

    .simulate('change', {target: {name: 'inputFirstName', value: 'value'}})

    Это заняло у меня довольно много времени, так что надеюсь, что это поможет кому-то здесь ...

    29.01.2021
  • Это зависит от обработчика функции, который обновит состояние. В случае вашего ответа это похоже на objState[event.target.name] = event.target.value. Следовательно, вы должны заглушить объект Event, чтобы он соответствовал соответствующему использованию вашего средства настройки состояния. 25.04.2021
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..