React: TestUtils.renderIntoDocument возвращает значение null, если передан действительный функциональный компонент.

Созданный на 10 апр. 2019 · 4Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?
Я хочу сообщить об ошибке.

Каково текущее поведение?
В настоящее время , когда действует функциональный компонент передается TestUtils.renderIntoDocument возвращает нуль и не поднимать ошибок нет.

Демо
Это поведение было воспроизведено в песочнице: https://codesandbox.io/s/1zpvll4j24

Проверьте консоль, чтобы увидеть выходные данные TestUtils.renderIntoDocument для подготовленных образцов компонентов.

Обходные пути
Обходной путь, который удовлетворяет как SFC, так и FC, заключается в переносе компонента в контейнер:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

Какое поведение ожидается?

Для рендеринга функционального компонента.
В худшем случае - выдача ошибки.

Какие версии React подвержены этой проблеме?
Версия React: 16.8.6

Test Utils Question

Источник

DeividasBakanas

Все 4 Комментарий

В функциональных компонентах нет instances , так что вы ожидаете

TestUtils.renderIntoDocument(<FCCounter/>)

возвращаться?

Кроме того, в общих чертах, можете ли вы объяснить, что вы пытаетесь сделать? Вы можете использовать forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle), чтобы получить доступ к внутренним «методам», но мне любопытно, что ты вообще пытаешься протестировать.

threepointone 11 апр. 2019

После вызова TestUtils.renderIntoDocument с классическим компонентом я полностью могу достичь его state , props и управлять компонентом с помощью setState . Итак, я ожидал, что TestUtils.renderIntoDocument вернет некий объект, позволяющий мне использовать state , props и setState .

Я пытаюсь протестировать компоненты, которые реализованы как функциональные компоненты. Основная цель - изменить состояние компонента и проверить, соответствует ли измененное состояние состоянию, ожидаемому тестом.

В случае тестирования у меня есть предварительное условие, что компоненты должны тестироваться как есть и не должны изменяться, чтобы содержать код специально для целей тестирования. Таким образом, изменение самого компонента для использования forwardRef/useImperativeHandle не является вариантом.

DeividasBakanas 12 апр. 2019

@DeividasBakanas Функциональные компоненты не имеют экземпляров. Вы можете нажать кнопку, которая будет обновлять состояние посредством отправки события. На мой взгляд, это также лучший подход, чем попытка императивного обновления экземпляра, возвращенного из TestUtils.renderIntoDocument (в случае компонентов класса).

trueadm 13 апр. 2019

👍1

Как упоминалось в @trueadm , мы не рекомендуем тестировать детали реализации самого компонента и использовать реквизиты / события для запуска обновлений и делать утверждения на выходе компонента. Я мог бы порекомендовать библиотеки, такие как react-testing-library https://github.com/kentcdodds/react-testing-library, чтобы сделать это немного проще. Кент также много пишет по этой теме, рекомендую.

Закрытие этой проблемы, поскольку это скорее вопрос использования, а не запрос ошибки / функции.

threepointone 15 апр. 2019

👍1

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

[ошибка] React onChange Synthetic / Proxy события перерабатываются, проблема, когда обработчик отменен

DimitarChristoff · 3Комментарии

Удалить прослушиватель событий, используемый с привязкой в синтаксисе ES6?

UnbearableBear · 3Комментарии

Переменная относится к new Date () не может быть дочерним элементом.

krave1986 · 3Комментарии

React.PropTypes.node должен принимать компонент (функцию) без сохранения состояния.

MoOx · 3Комментарии

идея: поддержка сокращенного значения свойства литерала объекта в синтаксисе jsx

bloodyowl · 3Комментарии