На прошлой неделе мы рассказали, как быстро создать каталог для тестирования vanilla Jest. На этот раз мы более подробно рассмотрим фактическую работу по использованию Jest для некоторых базовых тестов и формат использования Jest. В этой статье мы сосредоточимся на Jest, используемом в обычной среде Javascript, а не на фреймворке. Кроме того, это быстрое руководство о том, как структурировать приложение, так как это будет только Hello World! контрольная работа.
Сначала мы начнем с нашего тестового файла index.test.js. Мы знаем, что тестируем начальную настройку Jest, поэтому опишем это:
describe("Test for initial Jest setup.", () => {
});
Описание Jest ожидает строку, а затем функцию обратного вызова. Это инициализирует наши тесты, а также может использоваться для инициализации набора тестов. Следующий шаг можно пропустить для простого тестирования, но мы добавим его, чтобы продемонстрировать набор. Здесь мы описываем функцию, которую планируем тестировать, зная, что это будет практический тест.
describe("Test for initial Jest setup.", () => {
describe("practiceTest", () => {
});
});
Наборы тестов можно использовать для организации ваших ответов на тесты. Если все тесты в комплекте проходят, то на экран будет отображаться только текст из описания самого высокого уровня. Каждый неудачный уровень будет содержать все больше и больше подробной информации, если вы настроите его таким образом.
Теперь приступим к собственно тестированию! Эта функция также ожидает строку, а затем функцию обратного вызова. Строка для функций описания и тестирования должна быть уникальной, поскольку она действует как имя для Jest, чтобы сообщить вам о проблемах. Если два имени совпадают, то Jest пометит первое как неудачное, даже если второй тест не прошел. Я выбрал второе описание в качестве имени функции, за которым следует тест, описывающий, что нужно ввести, а затем получить. Оттуда мы назовем полученную переменную и ожидаемую переменную, сделав код для наших тестов довольно единообразным.
describe("Test for initial Jest setup.", () => {
describe("practiceTest", () => {
test("Given 'Hello World!', return 'Hello World!'", () => {
const received = "Hello World!";
const expected = "Hello World!";
});
});
});
Теперь мы пишем настоящий тест с помощью Jest, который очень легко читается. Мы ожидаем, что наша функция PracticeTest, которая получила наш аргумент , будет или вернет наш ожидаемый результат.
describe("Test for initial Jest setup.", () => {
describe("practiceTest", () => {
test("Given 'Hello World!', return 'Hello World!'", () => {
const received = "Hello World!";
const expected = "Hello World!";
expect(practiceTest(argument)).toBe(expected);
});
});
});
Технически мы могли бы удалить одно или все описания и просто пройти тест, но это не будет излишне описательным. Кроме того, охватывает ли один тест какие-либо угловые случаи, так почему бы не сгруппировать их?
На этом этапе у нас все еще не было бы прохождения тестов, поскольку у нас нет функции: PracticeTest, и мы не связали два файла. Пока мы находимся в тестовом файле, мы сделаем половину необходимых подключений. В верхней части файла нам потребуется файл Javascript, который мы собираемся здесь протестировать.
const { practiceTest } = require("./index");
То есть наш файл в целом выглядит так:
const { practiceTest } = require("./index");
describe("Test for initial Jest setup.", () => {
describe("practiceTest", () => {
test("Given 'Hello World!', return 'Hello World!'", () => {
const received = "Hello World";
const expected = "Hello World!";
expect(practiceTest(argument)).toBe(expected);
});
});
});
В приведенном выше коде мы разбираем объект функций, который собираемся построить и экспортировать. Перейдя к файлу index.js, мы сделаем очень простую функцию.
function practiceTest(phrase) {
return phrase + "!";
}
В добавлении восклицательного знака нет необходимости, но с его помощью мы можем убедиться, что наша первоначальная тестовая функция действительно принимает и возвращает разные значения. Последний шаг перед запуском Jest - это создание объекта функций для экспорта.
module.exports = {
practiceTest,
}
Делаем окончательный файл index.js читаемым как:
function practiceTest(phrase) {
return phrase + "!";
}
module.exports = {
practiceTest,
}
С этого момента перейдите в каталог, в котором были сохранены файлы. Если вы не сделали каталог в репозитории Git, вы можете использовать только:
yarn test --watchAll
Это будет работать, но каждый тест будет запускаться только один раз, прежде чем вам придется снова вводить команду. Мы хотим, чтобы Jest активно наблюдал за тем, как мы создаем тесты, и сообщал нам, когда мы все делаем правильно. Кроме того, Jest был построен с использованием yarn, поэтому команды тестирования лучше всего работают с yarn, а не с npm.
В противном случае, если у вас есть файлы в виде репозитория Git, вместо этого мы запустим:
yarn test --watch
Это сначала запустит все тесты в каталоге, а затем предоставит список опций для управления тем, как вы хотите, чтобы Jest отслеживал определенные файлы, тесты или другое поведение. Часто я вводю p для фильтрации по шаблону регулярного выражения имени файла. Это позволяет расширить кругозор по мере того, как вы выполняете все больше и больше тестов. Однако лучшая часть использования этой команды заключается в том, что тесты активно выполняются, поэтому измените функцию practiceTest, чтобы она больше не добавляла восклицательный знак. После сохранения файла вы должны увидеть, что ваш тест завершился ошибкой (очень важный аспект тестирования). Нажмите w после тестирования, чтобы вернуться в меню, или нажмите q, чтобы Jest вышел из режима просмотра.
Вот и все. У вас есть полностью настроенный репозиторий, готовый для тестирования следующего фрагмента кода. Хотя пример невероятно прост, он должен точно показать, как запустить Jest для решения ваших более сложных задач.
