Узнайте о JEST.

Что такое тестирование?

Тестирование означает проверку того, соответствует ли некоторый код предопределенным спецификациям или ожиданиям. Тестирование - неотъемлемая часть разработки качественного продукта. На практике мы можем найти множество видов тестирования. Некоторые из них могут называться модульным тестированием, интеграционным тестированием, тестированием пользовательского интерфейса и т. Д.

Шутка

Jest - это библиотека, представленная Facebook и используемая для тестирования JavaScript, особенно приложений React. Он распространяется как пакет NPM, поэтому его можно установить в любом проекте JavaScript. Мы можем запустить команду jest из командной строки и запустить все наши тесты за один раз. Jest предоставляет нам собственный API для тестовых утверждений для проверки результатов, что действительно значительно упрощает процесс тестирования.

Типичный процесс тестирования может выглядеть примерно так:

  • Импортируйте функцию.
  • Укажите вход для функции.
  • Укажите результат, ожидаемый от функции.
  • Проверьте, совпадает ли вывод, полученный с помощью функции, с ожидаемым выводом.
  • Если он соответствует ожиданиям, он проходит тест, в противном случае - нет.

Для простоты в этой статье мы будем тестировать только функцию. Мы рассмотрим тестирование компонентов React в следующей статье.

Начало работы

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

mkdir dummy_jest && cd $_
npm init -y

Мы настраиваем среду NPM с этим.

npm i jest --save-dev

Давайте установим jest в зависимости от разработчика, потому что он нам понадобится только для целей разработки.

Кроме того, нам нужно будет отредактировать наши тестовые сценарии в package.json следующим образом, чтобы запустить jest.

"scripts": {
    "test": "jest"
  },

Обычно наши тесты пишутся в папке __tests__. Так что именно этим мы и собираемся здесь заниматься. Создайте папку __tests__ в каталоге нашего проекта.

mkdir __tests__

Теперь мы пишем наши тесты внутри него. Создайте внутри файл с именем «removeDuplicate.test.js».

Начнем с блока описания.

describe(name, fn) создает блок, который объединяет несколько связанных тестов.

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

describe("Filter function", () => {
  // test stuff
});

Итак, следующий блок теста, в котором мы напишем наш настоящий тест.

describe("Filter function", () => {
  test("Remove the duplicate element from array", () => {
    // actual test
  });
});

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

function removeDuplicate(inputArr) {
let x = inputArr.filter((v, i) => inputArr.indexOf(v) === i)
return x;
}

Теперь мы хотим протестировать эту функцию. Нам нужны входные данные и ожидаемые выходные данные для этих входных данных. Так что продолжайте и напишите наши входные и выходные данные.

const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];

В тесте мы заключаем нашу функцию в ожидать.

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

В итоге мы пишем тест, который выглядит так:

describe("Filter function", () => {
test("it should remove duplicate elements", () => {
const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];
expect(removeDuplicate(input)).toEqual(output);
});
})

Здесь мы использовали сопоставитель toEqual. Он сопоставляет вывод наших функций с ожидаемым выводом. Если они равны, мы проходим тест, иначе - нет.

Итак, наконец, мы можем запустить наш тест с

npm test

Теперь мы видим, что наш тест проходит успешно. Значит, наша функция прошла проверку.

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

const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram','ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];

И снова запустите тест.

Теперь мы знаем, что наша функция не работает со строчными и прописными буквами. Итак, мы обнаружили, что нам нужно улучшить нашу функцию.

Кроме того, мы можем запустить несколько тестов внутри блока описания как:

describe("Filter function", () => {
// test stuff
test("it should remove duplicate elements", () => {
const input = ['John', 'Paul', 'George', 'Ringo', 'John', 'Ram'];
const output = ['John', 'Paul', 'George', 'Ringo', 'Ram'];
expect(removeDuplicate(input)).toEqual(output);
const input2 = ['Aaron', 'Bobby', 'Marshall', 'Joyner', 'Bobby'];
const output2 = ['Aaron', 'Bobby', 'Marshall', 'Joyner'];
expect(removeDuplicate(input2)).toEqual(output2);
});
})

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

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