Руководство по тестированию компонентов React

Остается только один вопрос: как далеко эта маленькая утилита может увести нас с компонентами React?

Положил все это вместе

Взгляните, например, на GreatApeList Какую главную проблему вы пытаетесь решить? Этот компонент показывает вам список отличных обезьян на основе фильтра.

Эффективным модульным тестом является передача списка и проверка фактов о том, что делает этот компонент React. Мы хотим, чтобы он фильтровал великих обезьян на основе флага.

Один из подходов состоит в том, чтобы сделать это:

 import GreatApeList from './GreatApeList';

const APES = [{ name: 'Australopithecus afarensis', isExtant: false },
  { name: 'Orangutan', isExtant: true }];

// Arrange
const renderer = new ShallowRenderer();
renderer.render(<GreatApeList
  apes={APES}
  showExtantOnly={true} />);

// Act
const component = renderer.getRenderOutput();
const rows = component.props.children;

// Assert
expect(rows.length).toBe(1);

Обратите внимание, что я тестирую компоненты React с использованием Jest. Подробнее об этом см. « Как тестировать компоненты React с помощью Jest ».

В JSX взгляните на showExtantOnly={true} Синтаксис JSX позволяет вам установить состояние ваших компонентов React. Это открывает множество способов для модульного тестирования компонентов в определенном состоянии. JSX понимает основные типы JavaScript, поэтому true

Со списком в стороне, как насчет GreatApeSearchBar Он имеет этот обработчик события в свойстве onChange

Один хороший юнит-тест должен сделать это:

 import GreatApeSearchBar from './GreatApeSearchBar';

// Arrange
let showExtantOnly = false;
const onChange = (e) => { showExtantOnly = e };

const renderer = new ShallowRenderer();
renderer.render(<GreatApeSearchBar
  showExtantOnly={true}
  onShowExtantOnlyInput={onChange} />);

// Act
const component = renderer.getRenderOutput();
const checkbox = component.props.children[0];

checkbox.props.onChange({ target: { checked: true } });

// Assert
expect(showExtantOnly).toBe(true);

Для обработки и тестирования событий вы используете один и тот же метод визуализации. Метод getRenderOutput Здесь onShowExtantOnlyInputonChange

На более тривиальном модульном тесте, как насчет компонента GreatApeRow Он отображает отличную информацию об обезьяне с использованием HTML-тегов. Оказывается, вы можете использовать мелкий рендер для проверки этого компонента.

Например, давайте удостоверимся, что мы визуализируем изображение:

 import GreatApeRow from './GreatApeRow';

const APE = {
  image: 'https://en.wikipedia.org/wiki/File:Australopithecus_afarensis.JPG',
  name: 'Australopithecus afarensis'
};

// Arrange
const renderer = new ShallowRenderer();
renderer.render(<GreatApeRow ape={APE} />);

// Act
const component = renderer.getRenderOutput();
const apeImage = component.props.children[0];

// Assert
expect(apeImage).toBeDefined();
expect(apeImage.props.src).toBe(APE.image);
expect(apeImage.props.alt).toBe(APE.name);

С компонентами React все это сосредоточено вокруг метода render Это делает несколько интуитивно понятным, чтобы точно знать, что вам нужно проверить. Благодаря мелкому рендереру вы можете лазерно сфокусироваться на одном компоненте, исключая при этом шум.

Вывод

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

Приятно то, что JSX работает для вас в каждом отдельном тесте, а не против вас. С JSX вы можете передавать логические значения, обратные вызовы или все, что вам нужно. Имейте это в виду, когда вы решите самостоятельно протестировать компоненты React.

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

Мне нравится инструмент Jest, который дает вам обратную связь только по конкретным файлам, которые вы меняете. Это сокращает петлю обратной связи и добавляет фокусировку лазера. Я надеюсь, вы понимаете, насколько это может быть полезно, когда вы решаете некоторые сложные вопросы.