Есть ли способ проверить изменения в дочерних компонентах React - PullRequest
Новая
       33

Есть ли способ проверить изменения в дочерних компонентах React

0 голосов
/ 14 февраля 2019

У меня есть компонент карусели, который я тестирую с Jest и Enzyme.Компонент получает в качестве дочерних элементов любой тип элементов.При событии touchMove в зависимости от направления касания активный дочерний объект изменяется соответствующим образом.

Есть ли способ проверить поведение компонента без зависимости от реализации?

1 Ответ

0 голосов
/ 14 февраля 2019

Вы можете сделать что-то вроде обернуть дочерние элементы в контейнеры и установить active className для активного контейнера. 

// inside your carousel component's render function
{this.props.carouselItems.map((child, i) => 
  <div 
    className={
      'container' + 
      (i === this.state.activeIndex ? ' active' : '')
    }
  >
    {child}
  </div>
)}

Затем, используя селекторы, проверить с помощью Enzyme правильный контейнер имеет класс active, когда вы выполняете различные действия / изменения состояния.

Таким образом, не имеет значения, что на самом деле являются дочерними компонентами, вы абстрагировали тест на «активность» отконкретная реализация с определенными дочерними элементами.

Обратите внимание, что приведенный выше код с использованием классов CSS - это просто очень простой пример - вы также можете сделать это более «реагирующим» образом с компонентами, используя activeПодпишите к компоненту контейнера, даже передав его в child, чтобы что-то сделать и т. д. Независимо от того, что требует ваш сценарий использования.Важной концепцией является то, что вы помечаете каждый компонент контейнера child как 'активность', чтобы Enzyme мог проверить это без необходимости тестировать какую-либо конкретную реализацию child.

Такжеобратите внимание, что модульные тесты по своей природе проверяют особенности реализации на некотором уровне абстракции.Они должны.Используя этот метод, вы можете абстрагироваться выше уровня конкретной реализации ваших дочерних компонентов, но вы все еще тестируете только конкретную механику «активности» на основе этого шаблона компонента контейнера.Что, если этот класс active просто ничего не делает, потому что сломан CSS, или то, как его использует child, сломано?

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

...