Компоненты тестирования единиц реакции: шума или фермент?

Задний план

Тестирование компонентов реагирования могут быть сложной задачей, особенно когда вы только начинаете с него. Даже основная задача узнать, какие инструменты тестируют его, уже могут быть запутаны. Два популярных варианта тестирования компонентов React являются шумирскими и ферментами. Разработчики, работающие с React, сталкиваются с вопросом: что я должен использовать, шутить или фермент?

Вот лишь несколько потоков, которые упомянули об этом сравнении или предложили один как альтернативу для другого:

В этом руководстве направлено на рекордную рекордную рекордную: вместо того, чтобы просить «шума или фермент», более подходящий способ посмотреть на это должен быть «шумиргин и фермент!»

Примечание редактора: Для этой же цели этот учебник был переписан из оригинальной версии, опубликованной 20 сентября 2016 года. Эта текущая версия была отредактирована для ясности.

Вступление

Реагировать Является ли библиотека UI для написания компонентов, а компоненты реагирования на тестирование единиц гораздо более организованы.

Прежде чем мы поговорим о ферменте и шуме, мы должны определить несколько терминов: тестирование бегуна, библиотеки утверждения и библиотеку издевательства.

Тестовый бегун – Инструмент, который поднимает файлы, которые содержат модульные тесты, выполняет их и записывает результаты теста на консоль или файлы журнала. Mocha и Jasmine – два популярных тестовых бегунов, используемые в сообществе JavaScript. Вы можете прочитать сравнение между двумя здесь Отказ
Утверждение библиотеки – проверяет результаты теста. Чай, следует и ожидать, что примеры библиотек утверждений JavaScript.
Макеты – используется в устройстве, тестирующих компонент. Компонент в соответствии с тестом имеет много зависимостей. Эти зависимости обычно заменяются заглушками или издевателями. Заглушки моделируют зависимый объект. Макеты предлагают дополнительную функцию над заглушками. Благодаря издевателям, тесты могут быть записаны для проверки того, что компонент под тестом позвонил издевательствам, как и ожидалось.
Издевающая библиотека – облегчает использование издевателей в тестировании подразделения. Sinon и TestDouble обычно используются библиотеки для насмешек JavaScript.

Фермент

Из ферментной документации:

Enzyme – это утилита для тестирования JavaScript для реагирования, которая облегчает утверждение, манипулировать и пересекать выходные компоненты реагирования.

Enzyme – это библиотека, которая включает пакеты, такие как ExtutiLS, JSDOD и Cheerio, чтобы создать более простой интерфейс для написания модульных тестов. React TestutiLs обладает методами для рендеринга компонента реагирования в документ и смоделировать событие. JSDOD – это реализация JavaScript от DOM (модель объекта документа). Дом представляет собой структуру дерева компонентов интерфейса. Cheerio реализует подмножество сердечника JQuery и используется для запроса DOM. Фермент обернуть эти библиотеки и обеспечивает простую и интуитивно понятное API для тестирования подразделения.

Фермент – это не Агрегатная структура тестирования. У него нет тестового бегуна или библиотеки утверждения. Работает с любым тестовым библиотекой бегуна и утверждения. Таким образом, это не мнение.

Востребоваться

Цитируя операционную документацию:

Jest – это структура тестирования блока JavaScript, используемая Facebook для тестирования служб и приложений на реагирование.

Jest – это каркас, а не библиотека. Он поставляется с тестовым бегуном, библиотекой утверждения и хорошей подмоченной поддержкой. Quest построен на вершине Жасмин Отказ

Jest имеет новый способ проверить компоненты реагирования: Тестирование снимков Отказ С тестированием снимка вывод текущего тестового прогона сравнивается с моментальным снимком предыдущего тестового прогона. Если вывод соответствует снимок, тестовые пропускания.

Сравнение фермента с шумом

Как упоминалось ранее, большинство разработчиков, которые хотят писать модульные тесты для приложения React Application, сравнивают две альтернативы: фермент или шума. Но на самом деле это сравнение похоже на сравнение яблок и апельсинов. Enzyme – это тестирующая библиотека для отображения компонента реагирования в DOM и запрашивать дерево DOM. Jest – это структура тестирования единиц и имеет тестовую бегунку, библиотеку утверждения и поддержание издевательства. Фермент и шума дополняют. Фермент можно использовать в шуме Отказ

Однако есть действительные причины, по которым разработчики сравнивают два.

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

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

Начало работы с шумами и ферментами

Первый шаг – установить реагирование.

npm install --save react react-dom

Мы создадим простой реактивный компонент, который отобразит Hello World Message.

export default class Welcome extends React.Component {
  render() {
    return (
      Hello world
    );
  }
}

Приветственный компонент представляет собой реактивный компонент, который использует JSX. Чтобы разбираться в анализе кода JSX и ES6, необходимы некоторые пакеты дополнения.

npm install --save-dev 
babel-core 
babel-loader 
babel-polyfill 
babel-preset-es2015 
babel-preset-react

Кроме того, в нашем проекте требуется файл Babelrc, который использует ES2015 и React Preset. Содержимое файла .babelrc показано ниже.

{
  "presets": ["es2015", "react"]
}

Далее мы устанавливаем себя.

npm install --save-dev
jest
babel-jest
react-test-renderer

Jest ищет тесты в папке под названием __tests__ Отказ Мы рассмотрим тестирование снимки, используя шутки.

import React from 'react';
import renderer from 'react-test-renderer';
import Welcome from '../src/client/components/welcome.jsx';

describe('Welcome (Snapshot)', () => {
  it('Welcome renders hello world', () => {
    const component = renderer.create();
    const json = component.toJSON();
    expect(json).toMatchSnapshot();
  });
});

Jest требует от пакета React-Test-Renderer, чтобы сделать компонент JSON. Опишите Функция используется для записи тестового набора. Это Функция используется для определения теста. ожидать Функция является частью библиотеки утверждения, выставленной шумой. Tomatchsnapshot Метод сравнивает вывод JSON с помощью снимка JSON в предыдущем тестовом запуске.

Чтобы запустить тесты, введите jest в командной строке. Вывод консоли при запуске Jest показан ниже.

Устройство тестирования объектов реагирования

При запуске теста файл снимка создан в __snapshots__ папка. Снимок нашего компонента показан ниже.

exports[`Welcome (Snapshot) Welcome renders hello world 1`] = `

  Hello world

`;

Тестирование снимков – еще одна новая идея из Facebook. Он обеспечивает альтернативный способ написания тестов без каких-либо утверждений. Для записи тестов, использующих утверждения, фермент довольно полезен.

Установка фермента прямо вперед.

npm install --save-dev enzyme

Тест для приветственного компонента с использованием фермента показан ниже.

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';
import Welcome from '../src/client/components/welcome.jsx';

describe('Welcome', () => {
  it('Welcome renders hello world', () => {
    const welcome = shallow();
    expect(welcome.find('div').text()).toEqual('Hello world');
  });
});

неглубокий Функция в ферменте делает неглубокий рендеринг до DOM. Неглубокий рендеринг не представляет никаких компонентов, вложенных в недорогую компонент. Найти Способ в ферменте принимает jQuery-подобные селекторы для извлечения узла из дерева DOM. В приведенном выше тесте текст узла DIV извлекается и утверждается на равных «Hello World» Отказ Помимо мелкого рендеринга, фермент позволяет полностью рендерировать с помощью Гора Функция и HTML-рендеринг с использованием оказывать функция. Неглубокий рендеринг используется для выделения компонента для тестирования единиц.

Тестирование структуры

Мы создадим компонент списка, который отображает список элементов в табличном формате. Тест на тест-компонент RACT приведен ниже.

export default class List extends React.Component {
  render() {
    return (
      
          {this.props.data.map((item, index) => (
            
          ))}
        
        
          
            Name
          
        
        
              
                {item}
              
            
      
    )
  }
}

Name
{item}

Мы проверим, если компонент React предоставляет таблицу, и данные передаются в реквизитах.

Наш тестовый набор будет назван в честь компонента React (список). Мы будем инициализировать все тесты в тестовом наборе с Rebedeach функция. Rebedeach Функция использует неглубокий функция для визуализации компонента.

describe('List', () => {
  let list;

  beforeEach(() => {
    list = shallow();
  });

});

Найти Метод поддерживает селекторы jQuery для получения конкретных узлов из дерева. Чтобы проверить, отображается ли таблица, мы используем «Таблица» селектор. Чтобы проверить, отображается ли определенный класс, мы используем '.myclass' селектор.

it('List renders table', () => {
  expect(list.find('table').length).toEqual(1);
});

it('Class of rendered table', () => {
  expect(list.find('.myClass').length).toEqual(1);
});

Найти Метод возвращает массив узлов. Чтобы получить первый элемент, мы используем Первый метод. Чтобы получить NT-элемент, мы используем на метод.

it('List renders column', () => {
  const arr = list.find('th');
  expect(arr.length).toEqual(1);
  expect(arr.first().text()).toEqual('Name');
});

it('List renders data', () => {
  const arr = list.find('td');
  expect(arr.length).toEqual(3);
  expect(arr.at(1).text()).toEqual('Name 2');
});

Тестирование поведения

Мы создадим добавочный компонент, который имеет элемент формы с помощью входного текста и кнопкой. Мы хотим проверить поведение компонента, когда кнопка нажала. Код для компонента добавления показан ниже.

export default class Add extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: ''
      };
      this.handleAdd = this.handleAdd.bind(this);
    }

    handleAdd(e) {
        e.preventDefault();
        this.props.onAdd(this.state.name);
    }

    render() {
      return (
        
           this.setState({ name: e.target.value })}
          >
          
          
        
      );
    }
}

Добавить компонент вызывает Handleadd Метод, когда кнопка нажала. Handleadd Метод вызывает Онадд Функция набор в реквизитах. Обычно фактическая работа выполняется родительским компонентом или действием redux.

Поведение тестирования лучше всего выполняется путем установки компонента. Имеет хорошую поддержку. Мы будем использовать jest.fn () создать макетную функцию. Мы предоставим издевательства на Онадд опоры нашего компонента.

describe('Add', () => {
  let add;
  let onAdd;

  beforeEach(() => {
    onAdd = jest.fn();
    add = mount();
  });

});

Мы начнем тестирование, проверяя ли Онадд опоры определены. Мы также проверим структуру, проверив, отображается ли кнопка.

it('Add requires onAdd prop', () => {
  expect(add.props().onAdd).toBeDefined();
});

it('Add renders button', () => {
  const button = add.find('button').first();
  expect(button).toBeDefined();
});

Затем мы проверим поведение компонента, когда кнопка нажала. Когда кнопка нажала, нашему издевательством следует вызывать с соответствующими аргументами.

it('Button click calls onAdd', () => {
  const button = add.find('button').first();
  const input = add.find('input').first();
  input.simulate('change', { target: { value: 'Name 4' } });
  button.simulate('click');
  expect(onAdd).toBeCalledWith('Name 4');
});

Фермент не позволяет изменять значение входного элемента. Вместо этого мы смоделируем событие Изменить на входном тексте. После этого мы смоделируем событие Click кнопки. симулировать Метод полезен для моделирования действий пользователей.

Есть причина, почему я рекомендовал Гора функция вместо неглубокий функция. С неглубоким рендерингом мы должны пройти аргументы мероприятия вместе с моделируемым событием. В приведенном выше сценарии имитация события CLICK потребуется пропущена аргументами события. Handleadd Метод в нашем компоненте реагирования вызывает eventargs.preventdefault () метод. Не передавая аргументы события, тест не пройдет неудачу.

С неглубокому рендерингу, реквизиты на компонент не могут быть проверены. Вызов MLALLOWRAPPER .props (). Propname вернется undefined Отказ Это ограничения с мелким рендерингом. Эти проблемы могут быть исправлены в будущих выпусках.

Тестирование вложенных компонентов

Мы встроим добавление и компонент списка, который мы создали в последних нескольких разделах в новом компонент под названием приложение. Код для компонента приложения показан ниже.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    };
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd(name) {
    const list = this.state.list.slice();
    list.push(name);
    this.setState({ list });
  }

  render() {
    return (
      
        
        
      
    );
  }
}

Мы проверим компонент приложения для структуры и поведения. Компонент приложения должен содержать как добавить, так и компонент списка. Когда Онадд Событие компонента добавления срабатывает, компонент списка получает новую опору данных.

Мы используем неглубокий Функция для неглубоко визуализации компонента. Это не оказывает вложенные компоненты.

describe('App', () => {
  let app;

  before(() => {
    app = shallow();
  });
});

Мы проверяем структуру компонента приложения, используя Найти метод. Селектор для внутреннего компонента является именем компонента. Код ниже тестов, если компонент содержит два внутренних компонента, добавить и список.

it('App renders nested components', () => {
  expect(app.find('Add').length).toEqual(1);
  expect(app.find('List').length).toEqual(1);
});

Мы хотим протестировать взаимодействия компонентов между вложенными компонентами. Когда Онадд Событие срабатывает в компоненте Add, компонент списка должен быть обновлен новой записью.

it('onAdd updates List', () => {
  const add = app.find('Add').first();
  add.props().onAdd('Name 1');
  app.update();     
  const list = app.find('List').first();
  const listData = list.props().data;
  expect(listData.length).toEqual(1);
  expect(listData[0]).toEqual('Name 1');
});

Мы получаем добавочный компонент, используя Найти метод. Мы вызываем Онадд мероприятие. Мы позволяем компоненту обновить себя. После обновления компонент списка имеет вновь добавленную запись.

API.

API, раскрытый Jest и Фермент очень разные.

Jest API

JEST API сосредоточивается больше на умение определить тесты, сделать утверждения и создавать издевательства.

Опишите : Определяет тестовый люкс.
Это : Определяет тест.
Rebedeach : Определяет входной крючок перед запуском каждого теста.
ожидать : делает утверждение.
jest.fn () : Создает макет функции.

Несколько методов доступны для утверждений.

Товарищ : Проверяет, имеют ли два объекта одинаковое значение.
Тобе : Проверяет, имеют ли два объекта одинаковое значение и тип.
надевание : Проверяет, определен ли объект.
TOCONTAIN : Проверяет, присутствует ли элемент в списке.
Тобать : Проверяет, называется ли функция MOCK.

Есть полезные методы в макете.

Мокимементирование Предоставляет реализацию для макета функции.
Mockreturnwalue Возвращает значение, когда вызывается функция MOCK.

Фермент API

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

неглубокий : Оказывает только в тесте компонента. Зависимые компоненты не отображаются.
Гора : Установите полный компонент в JSDOM.
оказывать : Оказывает компонент как статический HTML.

Существует несколько методов для извлечения узлов из визуализированного компонента.

Найти : принимает селектор и извлекает узлы, которые соответствуют селектору.
искать : Получить узлы, выбранные предикатом.
некоторые : Возвращает true, если есть хотя бы один узел, соответствующий селектору.
где-то : Возвращает true, если есть хотя бы один узел, выбранный предикатом.
Первый : возвращает первый узел набора.
на : возвращает N-й узел набора.
HTML : Получает HTML узла.
текст : Получает текстовое представление узла.

Существует более методы взаимодействия с компонентом и извлеките состояние компонента.

симулировать : Имитает событие.
SetProops : Устанавливает реквизиты.
SetState : Устанавливает состояние.
setcontext : Устанавливает контекст.
опоры (ключ) : Получает значение SP, соответствующую предоставленному ключу.
Государство (ключ) : Получает состояние, соответствующее предоставленному ключу.
Контекст (ключ) : Получает значение контекста, соответствующее предоставленному ключу.

Заключение

Мы видели, как использовать фермент с помощью шума в этом руководстве. Enzyme имеет простой API для тестирования компонентов реагирования. Jest – это агрегатная система тестирования, разработанная Facebook, чтобы проверить приложения React. Jest позволяет писать модульные тесты, используя функцию Snapshot. Фермент позволяет писать модульные тесты с использованием регулярных утверждений. Использование фермента с помощью Jest делает тесты на написание для приложений Ract React намного проще.

Есть сопроводительное Проект GitHub который имеет исходный код, объясненный в этом руководстве.

Другие полезные ресурсы

Если вы все еще запутались между двумя после этого учебника, вот все больше ресурсов вокруг Интернета, чтобы помочь вам: