Приобретите навыки модульного тестирования — Учебник по тестированию Jest

Что такое модульное тестирование?

Юнит-тестирование — это метод тестирования, который проверяет одну единицу исходного кода, что включает в себя проверку вывода функции или компонента для заданных входных данных.

Другими словами, написание модульных тестов является важной частью Test-Driven-Development (TDD), когда мы проверяем, что наш код работает так, как ожидается, прежде чем приступить к написанию фактической функции.

Что такое Jest?

Jest — это среда тестирования JavaScript, разработанная для упрощения тестирования путем предоставления всех необходимых инструментов для запуска тестов в рамках одного пакета.

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

Как установить Jest?

Выполните этот код в командной строке, чтобы установить пакет Jest в новый или существующий проект.

# NPM Code
npm install --save-dev jest @types/jest

# Yarn Code
yarn add --dev jest @types/jest

Как настроить тесты с помощью Jest?

Давайте начнем с обновления файла package.json с помощью тестового скрипта, который вызовет для нас команду Jest:

{
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "jest",
        "eject": "react-scripts eject"
    }
}

Чтобы запустить тесты, запустите npm test, который мы только что определили в package.json.

# NPM users
npm run test

# Yarn users
yarn run test

По умолчанию Jest ожидает найти файлы тестов в папке с названием tests в папке вашего проекта. Давайте создадим эту новую папку:

mkdir __tests__

Создание первого набора тестов

Далее создайте новый файл в папке __test__, которую вы только что создали, и назовите его calculator.test.js. Каждый раз, когда вы начинаете писать новый набор тестов для функциональности, оберните его в блок describe.

describe("Calculator tests", () => {
    //test stuff goes here 
});

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

Перейдем на следующую строку и создадим новую функцию под названием test, которая и будет собственно тестовым блоком:

describe("Calculator tests", () => {
    test('adding 1 + 2 should return 3', () => {
    //  Resolve
    var result = calculator.sum(1,2)
    // assert
    expect(result).toBe(3);
    });
});

Когда вы пишете тест, вам обычно нужно делать утверждения в коде. Чтобы сделать утверждение, вам понадобятся входные данные и ожидаемый выход.

Использование матчеров

В Jest используются «матчики», позволяющие проверять значения различными способами.

Вот наиболее распространенные из них:

• Быть: строгое равенство (===)

expect(1+2).toBe(3);

• Не быть: строгое равенство (!==)

expect(2+2).not.toBe(3) 

• Равняться: Глубокое равенство

expect([2, 2]).toEqual([2, 2])

• toBeTruthy или toBeFalsy: Обратите внимание, что все, что не является логически истинным, является ложным.

expect(null).toBeFalsy();
expect(undefined).toBeFalsy();
expect(false).toBeFalsy();

expect("Hello world").toBeTruthy();

• Not: Возвращает результат, противоположный результату матчера.

expect([2]).not.toEqual([3]);

Итак, это не единственные матчеры, и если вы хотите узнать больше о матчерах, посетите Jest Docs.

Запуск специфических тестов

Сначала зайдите в файл calculator.js и скопируйте содержимое, показанное ниже:

const calculator = {
    sum: function(a,b) {
        return a + b;
    },

    diff: function(a,b) {
        return a - b;
    },
    product: function(a,b) {
        return a * b
    },

    divide: function(a,b){
        return a / b
    }
 }

module.exports = calculator;

Затем вернитесь в файл calculator.test.js и укажите имя файла теста, который вы хотите запустить:

// This is how the file would look with just the import
const calculator = require('../calculator');

// Test Suite Goes Here

Теперь давайте напишем тесты для сложения двух чисел и проверки ожидаемого результата. Мы будем использовать числа 1 & 2 и ожидать результат 3.

describe("Calculator tests", () => {
    test('adding 1 + 2 should return 3', () => {
    //  Resolve
    var result = calculator.sum(1,2)
    // assert
    expect(result).toBe(3);
    });
});

Чтобы запустить этот тест, нам нужно выполнить в терминале следующую команду npm run test.

Вы должны увидеть следующий результат

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

Посмотрите, как выглядит тест.

describe("Calculator tests", () => {
    test('adding 1 + 2 should return 6', () => {
    //  Resolve
    var result = calculator.sum(1,2)
    // assert
    expect(result).toBe(6);
    });
});

Теперь запустите приведенный выше код и посмотрим, что мы получим.

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

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

const calculator = require('../calculator');

describe("Calculator tests", () => {
    test('adding 1 + 2 should return 6', () => {
    //  Resolve
    var result = calculator.sum(1,2)
    // assert
    expect(result).toBe(6);
    });

    test("subtracting 5 from 10 should return 5", () => {
      // Resolve
      var result = calculator.diff(10,5)
      // assert
      expect(result).toBe(5);
    });

    test("multiplying 8 and 2 should return 16", () => {
      // Resolve
      var result = calculator.product(2,8)
      // assert
      expect(result).toBe(16);
    });

    test("dividing 8 and 4 should return 2", () => {
      // Resolve
      var result = calculator.divide(8,4)
      // assert
      expect(result).toBe(2);
    });

   });

Теперь выполните готовый набор тестов и посмотрите, что мы получим.

Настройка тестового покрытия

Внутри вашего package.json вы можете легко увидеть покрытие кода с помощью опции --coverage.

// Package Contents
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --watchAll --coverage",
    "eject": "react-scripts eject"
  }

Также вы можете настроить его, создав файл jestconfig.json со следующим содержимым.

{
    "collectCoverage":true,
    "coverageReporters": ["clover", "json", "lcov", ["text", {"skipFull": true}]],
    "coverageDirectory": "./report/code-coverage/"
}

Затем вернитесь в файл package.json и добавьте в настройки следующую команду.

//Package Contents 
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --watchAll --config=jestconfig.json",
    "eject": "react-scripts eject"
  },

Примечание: Запустите npm test и посмотрите сгенерированный вывод в терминале.

Теперь вы должны увидеть, что покрытие кода генерирует lcov-отчет в вашем проекте для файла calculator.js.

Перейдите в каталог Code Coverage и откройте html-файл в локальном браузере следующим образом.

Откройте файл calculator.js и вы должны увидеть следующий результат.

Если вы хотите улучшить Jest, то я настоятельно рекомендую вам посетить их документацию!

Еще раз большое спасибо, что дочитали до конца, удачного дня!