Краткое введение в тестирование выражений и фреймворков в 2019 году

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

Различные типы тестирования: модульное, интеграционное и E2E.

Модульное тестирование:

Основная цель модульного тестирования — протестировать только функцию или метод. В этом методе тестирования мы предоставляем функции определенные входные данные и ожидаем, что она даст определенные результаты. Поскольку объем этого тестирования невелик, любое отношение к внешним активам или функциям должно быть смоделировано.

Интеграционное тестирование:

При модульном тестировании имитируются все внешние связи, поэтому цель интеграционного тестирования — проверить, правильно ли работают разные модули (подсистемы) вместе.

Сквозное тестирование (тестирование E2E)

Тестирование E2E определяется как тестирование полной функциональности некоторого приложения. Цель этого тестирования — полностью проверить пользовательский опыт и весь процесс с точки зрения клиента. Например, в этом методе браузер автоматически моделирует всю процедуру, которую должен выполнить пользователь.

Различные части тестирования: инструменты Runner, Assertion, Mocking, Snapshotting и покрытия.

Чтобы иметь возможность запустить тест, нам нужны библиотеки, которые на самом деле отвечают за разные задачи во всем процессе тестирования. Некоторые библиотеки, такие как chai, sinon, сосредоточены только на одной задаче, в то время как jest (framework) обеспечивает все различные требования, необходимые для тестирования.

Тестировщики (Мокко, Жасмин, Шутка)

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

Библиотеки утверждений (Chai, Jest)

По сути, тест представляет собой комбинацию нескольких операторов if, где мы проверяем, дают ли функции ожидаемые результаты с определенными входными данными. Библиотеки утверждений — это инструменты для проверки правильности действий.
Это значительно упрощает тестирование кода, поэтому вам не нужно выполнять тысячи if операторов.

Они предоставляют нам синтаксис, такой как describe (для создания набора тестов), it (для создания тестового сценария) и ожидание ( проверить дело).

Например, Jest — это полная среда тестирования, которая поставляется со встроенной библиотекой утверждений (поэтому нам не нужна дополнительная настройка для этого). Однако Mocha не имеет библиотеки утверждений, и мы можем использовать для него chai в качестве модуля утверждений.

Насмешливые и шпионские библиотеки (Sinon, Jest)

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

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

Моделирование модуля:мы можем имитировать тяжелые внешние модули с помощью простых функций, чтобы увеличить скорость тестирования. Иногда внешние библиотеки выполняют нежелательные дополнительные вычисления, и мы можем подделать все эти процессы с помощью функции единства. Например, поведение CSSModule и isomorphic-style-loader можно сымитировать с помощью простой функции (component =› component), которая возвращает тот же компонент.

Sinon может предоставить нам эту функцию, однако в jest мы можем имитировать модули в конфигурационном файле jest, чтобы всякий раз, когда импортируется модуль «moduleName», он вместо этого использовал поддельную функцию.

Моделирование функций. Иногда наши протестированные функции (компоненты) принимают другие функции в качестве входных данных (например, реквизиты onChange). Чтобы упростить эти функции, мы можем создать простые поддельные функции, такие как (()=›42), эта функция будет возвращать 42 независимо от входного значения. И sinon, и jest предоставляют нам более сильные функции имитации (jest.fn()). которые мы можем использовать для предоставления определенных фиктивных значений.

const myMock = jest.fn(); 
console.log(myMock()); // > undefined
  
myMock
   .mockReturnValueOnce(10)
   .mockReturnValueOnce('x')
   .mockReturnValue(true);  
console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true

Шпионы функций: иногда нам нужно убедиться, что метод класса вызывается только 1 раз и не больше. Мы можем использовать как jest, так и sinon, чтобы добавить шпионскую функцию (к прототипу) нашего метода, чтобы проверять каждый раз, когда он вызывается.

Моделирование сервера. Запросы к внешним API вызывают неожиданные побочные эффекты. Эти запросы можно просто замочить промисом, который тут же разрешается, или мы можем использовать для этого библиотеки. Например, в sinon мы можем подделывать вызовы ajax, запросы XMLHttp и полностью подделывать сервер.

Библиотеки снимков (шутка)

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

Например, при использовании тестов моментальных снимков при первом запуске этого теста Jest создает файл моментального снимка, который выглядит следующим образом:

exports[`renders correctly 1`] = `
 <a
   className="normal"
   href="http://www.facebook.com"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
   Facebook
 </a>
 `;

Утилиты для тестирования DOM и React (Enzyme, JSDom)

Чтобы иметь возможность протестировать компонент в React, нам нужно отобразить его в браузере и проверить пользовательский интерфейс и DOM, а также посмотреть, созданы ли ожидаемые результаты. Однако это тяжелый процесс, который замедляет тестирование.

jsdom — это среда чистого JavaScript, которая имитирует настоящий браузер. У него нет пользовательского интерфейса, однако он может создавать документ, тело, окно и дерево dom.

Enzyme — это известная тестовая утилита React, которая предоставляет нам несколько функций, таких как возможность поверхностного рендеринга только одного компонента или монтирования всего компонента и со всеми его дочерними элементами (с использованием jsdom).