Автор оригинала: FreeCodeCamp Community Member.
Мы все знаем, что мы должны писать модульные тесты. Но трудно узнать, с чего начать и сколько времени, чтобы посвятить тестам по сравнению с фактической реализацией. Итак, с чего начать? И это только о тестировании кода или у модульных тестов есть другие преимущества?
В этой статье я объясню различные типы тестов, и какие преимущества тестирования подразделений приводит к командам развития. Я продемонстрирую JEST – структуру тестирования JavaScript.
Различные виды тестирования
Перед тем, как мы погрузимся в тестирование подразделения, я хочу сделать быстрый пробег через различные типы тестов. Вокруг них часто есть некоторая путаница, и я не удивлен. Иногда линия между ними довольно тонкая.
Агрегатные тесты
Агрегаты тестирует только одну часть вашей реализации. Единица. Нет зависимостей или интеграций, без специфики структуры. Они как метод, который возвращает ссылку на конкретном языке:
export function getAboutUsLink(language){
switch (language.toLowerCase()){
case englishCode.toLowerCase():
return '/about-us';
case spanishCode.toLowerCase():
return '/acerca-de';
}
return '';
}Тесты интеграции
В какой-то момент ваш код связывается с базой данных, файловой системой или другой третьей стороной. Это может даже быть другим модулем в вашем приложении.
Этот образ реализации должен быть проверен тестами интеграции. Они обычно имеют более сложную установку, которая включает в себя подготовку среды тестирования, инициализации зависимостей и т. Д.
Функциональные тесты
Установки тестов и интеграционные тесты дают вам уверенность в том, что ваши приложения работают. Функциональные тесты посмотрите на приложение с точки зрения пользователя и проверьте, что система работает как ожидалось.
На диаграмме выше, вы видите, что тесты единиц образуют большую базу тестирования вашего приложения. Как правило, они маленькие, их много, и они выполняются автоматически.
Итак, теперь давайте попадаем в модульные тесты более подробно.
Почему я должен беспокоить тесты написания единиц?
Всякий раз, когда я спрашиваю разработчиков, написал ли они тесты на их приложение, они всегда говорят мне: «У меня не было времени для них», или «Я им не нужен, я знаю, что это работает».
Так что я беду вежливо и скажу им, что я хочу тебе сказать. Установки тесты не только о тестировании. Они также помогают вам другими способами, так что вы можете:
Будьте уверены, что ваш код работает. Когда в последний раз вы совершаете изменение кода, ваша сборка не удалась, а половина вашего приложения перестала работать? Мой была на прошлой неделе.
Но это все еще хорошо. Настоящая проблема заключается в том, когда сборка добивается успеха, изменение развернута, и ваше приложение начинает нестабильно.
Когда это произойдет, вы начинаете потерять уверенность в своем коде и в конечном итоге просто молиться за приложение для работы. Агрегатные тесты помогут вам обнаружить проблемы намного раньше и получить доверие.
Сделать лучшие архитектурные решения. Кодовые изменения, но некоторые решения о платформе, модулях, структуре и другим необходимо сделать на ранних этапах проекта.
Когда вы начинаете думать о тестировании подразделения прямо в начале, он поможет вам создать свой код лучше и добиться надлежащего разделения опасений. Вы не будете соблазнены назначать несколько обязанностей для одиночных блоков кода, так как это будет кошмар на единицу теста.
Определить функциональность перед кодировкой. Вы пишете подпись метода и начните реализовать ее сразу. О, но что должно произойти в случае, если параметр нуль? Что, если его значение находится за пределами ожидаемого диапазона или содержит слишком много персонажей? Вы бросаете исключение или возвращайте нуль?
Установки тесты помогут вам обнаружить все эти случаи. Посмотрите на вопросы снова, и вы найдете его именно то, что определяет тестовые случаи вашего устройства.
Я уверен, что есть еще много преимуществ для написания модульных тестов. Это только те, которые я помню из моего опыта. Те, которые я узнал сложно.
Как написать свой первый тест JavaScript
Но давайте вернемся к JavaScript. Начнем с Jest , который является структурой тестирования JavaScript. Это инструмент, который включает автоматическое тестирование подразделения, обеспечивает покрытие кода, и позволяет нам легко высмеивать объекты. Jest также имеет расширение для визуального студийного кода Доступно здесь Отказ
Есть также другие рамки, если вы заинтересованы, вы можете проверить их в Эта статья Отказ
npm i jest --save-dev
Давайте использовать ранее упомянутый метод GetaboutusLink Как реализация, которую мы хотим проверить:
const englishCode = "en-US";
const spanishCode = "es-ES";
function getAboutUsLink(language){
switch (language.toLowerCase()){
case englishCode.toLowerCase():
return '/about-us';
case spanishCode.toLowerCase():
return '/acerca-de';
}
return '';
}
module.exports = getAboutUsLink;
Я положил это в index.js файл. Мы можем написать тесты в том же файле, но хорошая практика – это отделить тесты подразделения в выделенный файл.
Общие шаблоны именования включают {filename} .test.js и {filename} .spec.js Отказ Я использовал первый, index.test.js :
const getAboutUsLink = require("./index");
test("Returns about-us for english language", () => {
expect(getAboutUsLink("en-US")).toBe("/about-us");
});
Во-первых, нам нужно импортировать функцию, которую мы хотим проверить. Каждый тест определяется как вызов Тест функция. Первый параметр – это имя теста для вашей справки. Другой – это функция стрелки, в которой мы называем функцию, которую мы хотим проверить, и указать, какой результат мы ожидаем. я
Это дело, мы называем GetaboutusLink Функция с EN-US как языковой параметр. Мы ожидаем, что результат будет /О нас Отказ
Теперь мы можем установить Jest CLI глобально и запустить тест:
npm i jest-cli -g jest
Если вы видите ошибку, связанную с конфигурацией, убедитесь, что у вас есть Package.json подарок файла. Если вы не генерируете один, используя NPM init Отказ
Вы должны увидеть что-то вроде этого:
PASS ./index.test.js
√ Returns about-us for english language (4ms)
console.log index.js:15
/about-us
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.389s
Прекрасная работа! Это был первый простой простым тестом блока JavaScript от начала до конца. Если вы установили расширение кода Visual Studio, он автоматически запустится тесты после сохранения файла. Давайте попробуем это, продлив тест с помощью этой линии:
expect(getAboutUsLink("cs-CZ")).toBe("/o-nas");
После того, как вы сохраните файл, шума будет сообщать вам, что тест не удался. Это помогает вам обнаружить потенциальные проблемы даже до совершения изменений.
Тестирование расширенных функций и услуги издевательства
В реальной жизни языковые коды для метода GetaboutusLink не будут постоянными в том же файле. Их значение обычно используется по всему проекту, чтобы они были определены в собственном модуле и импортируются во все функции, которые их используют.
import { englishCode, spanishCode } from './LanguageCodes'
Вы можете импортировать эти константы в тест таким же образом. Но ситуация станет более сложной, если вы работаете с объектами вместо простых констант. Посмотрите на этот метод:
import { UserStore } from './UserStore'
function getUserDisplayName(){
const user = UserStore.getUser(userId);
return `${user.LastName}, ${user.FirstName}`;
}
Этот метод использует импортные Ушнее :
class User {
getUser(userId){
// logic to get data from a database
}
setUser(user){
// logic to store data in a database
}
}
let UserStore = new User();
export { UserStore }
Для правильной установки тестируйте этот метод, нам нужно издеваться Ушнее Отказ Мока – это заменитель исходного объекта. Это позволяет нам разделять зависимости и реальные данные из реализации тестированного метода, такими как манекены, которые помогают в результате компромисных испытаний автомобилей вместо реальных людей.
Если мы не использовали издевательства, мы будем тестировать как эту функцию, так и в магазине. Это будет тест интеграции, и мы, вероятно, понадобится издеваться в использованную базу данных.
Насмешливый сервис
Чтобы издеваться над объектами, вы можете либо предоставить функцию издевательства или ручную макет. Я сосредоточусь на последнем, так как у меня простой и простой использование. Но не стесняйтесь Проверьте другие возможности для насмешек, которые предоставляют Отказ
jest.mock('./UserStore', () => ({
UserStore: ({
getUser: jest.fn().mockImplementation(arg => ({
FirstName: 'Ondrej',
LastName: 'Polesny'
})),
setUser: jest.fn()
})
}));
Во-первых, нам нужно указать, что мы издевающиеся – ./UsSherstore модуль. Далее нам нужно вернуть макет, который содержит все экспортированные объекты из этого модуля.
В этом образце это только Пользователь Объект имени Ушнее с функцией GetUser Отказ Но с реальными реализациями, макет может быть намного дольше. Любые функции, на которых вы на самом деле не заботитесь о области тестирования подразделения, можно легко издеваться с jest.fn () Отказ
Тест подразделения для getuserdisplayname Функция похожа на тот, который мы создали ранее:
test("Returns display name", () => {
expect(getUserDisplayName(1)).toBe("Polesny, Ondrej");
})
Как только я сохраню файл, шутка, у меня есть 2 прохождения тестов. Если вы выполняете тесты вручную, сделайте это сейчас и убедитесь, что вы видите тот же результат.
Отчет о покрытии кода
Теперь, когда мы знаем, как проверить код JavaScript, приятно покрывать как можно больше кода с тестами. И это трудно сделать. В конце концов, мы просто люди. Мы хотим получить наши задачи, и тесты единиц обычно дают ненужную рабочую нагрузку, которую мы склонны упускать из виду. Кодовое покрытие – это инструмент, который помогает нам бороться с этим.
Покрытие кода скажет вам, насколько большая часть вашего кода покрыта модульными тестами. Возьмите, например, мой первый тест на единицу проверки GetaboutusLink Функция:
test("Returns about-us for english language", () => {
expect(getAboutUsLink("en-US")).toBe("/about-us");
});
Он проверяет английскую ссылку, но испанская версия остается непрозрачной. Покрытие кода составляет 50%. Другой тест на единицу проверяет getdisplayname Функция тщательно и его кодовое покрытие на 100%. Вместе общее покрытие кода составляет 67%. У нас было 3 использования случаев для тестирования, но наши тесты только охватывают 2 из них.
Чтобы увидеть отчет о покрытии кода, введите следующую команду в терминал:
jest --coverage
Или, если вы используете код Visual Studio с помощью расширения Jest, вы можете запустить команду (Ctrl + Shift + P) Whest: Toggle охват охвата Отказ Он покажет вам право в реализации, какие строки кода не покрываются тестами.
Запустив проверку покрытия, Jest также создаст HTML-отчет. Найдите его в вашей папке проекта под Охват/LCOV-отчет/index.html Отказ
Теперь мне не нужно говорить, что вы должны стремиться к 100% кодовым покрытием, верно?:-)
Резюме
В этой статье я показал вам, как начать с тестирования подразделения в JavaScript. Хотя приятно, что ваш кодовый охват сияет на 100% в отчете, на самом деле, не всегда возможно (осмысленно) добраться туда. Цель состоит в том, чтобы дать тесты подразделения, которые помогут вам сохранить свой код и убедиться, что он всегда работает как предназначен. Они позволяют вам:
- четко определить требования реализации,
- Лучше дизайна ваш код и отдельные проблемы,
- Откройте для себя проблемы, которые вы можете представить с вашими новыми коммитами,
- И дать вам уверенность в том, что ваш код работает.
Лучшее место для начала – это Начало работы Страница в операционной документации, чтобы вы могли попробовать эти практики для себя.
У вас есть свой опыт работы с тестированием? Я хотел бы услышать это, дайте мне знать на Twitter или присоединиться к одному из моих Twitch Streams Отказ