Как проверить функцию в реагирующем SFC, который использует хуки? - PullRequest
Новая
       8

Как проверить функцию в реагирующем SFC, который использует хуки?

0 голосов
/ 01 июля 2019

https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks

документ показывает, что мы должны использовать React DOM для тестирования компонента. Но во многих случаях наши логические компоненты отображают другой компонент пользовательского интерфейса. И, возможно, функция в логическом компоненте будет переданаUI компонент как опора, как 

function Foo(){
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  function onChange(value) {
    setCount(value);
  }
  return <Bar value={count} onChange={onChange} />
}

function Bar(props){
  const { value, onChange }  = props;
  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={() => onChange(count + 1)}>
        Click me
      </button>
    </div>
  );
}

В этом случае, как я могу проверить onChange() и другие функции, которые не могут быть получены в DOM? Это самый простой случай.Если мы используем некоторую библиотеку компонентов, такую ​​как design-design и ant-design, мы обычно не знаем структуру DOM.

1 Ответ

0 голосов
/ 01 июля 2019

Как следует из документов:

Если ваше решение для тестирования не зависит от внутренних компонентов React, тестирование компоненты с крючками не должны отличаться от обычных тестовые компоненты.

Цель вовсе не в том, чтобы проверить функцию onChange, независимо от того, работают ли перехватчики или нет, уже протестирована командой React.

Ваше текущее изменение для рендеринга компонента вообще не меняет тест, рендеринг Foo по-прежнему отображает button и p, как бы глубоко ни шла цепочка компонентов.

При использовании такой инфраструктуры, как Antd или Material Design, может быть сложно узнать полную структуру DOM. Но вместо этого, или лучше, вы можете запрашивать то, что пользователь видит на вашей странице.

Например, с использованием React библиотеки тестирования , рекомендованной в документации: 

const button = getByText(container, /Click Me/i);

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

...