Тестирование с помощью JEST и Mocks

Модульные тесты должны быть важной частью всего вашего приложения. Я лично умею заранее обнаруживать ошибки с помощью модульных тестов. Это руководство поможет вам начать модульное тестирование с использованием JEST.

Предпосылки

Редактор кода - Visual Studio Code
NodeJs
ExpressJs
ES6
JEST

Базовый сервис NodeJs Rest

Вы можете получить исходный код на gitHub.

Вы можете выполнить git clone https://github.com/danleegion/Jest-Mock.git, чтобы клонировать репозиторий и проверить исходный тег исходного кода, выполнив git checkout tags/Init -b Init

Приведенная выше команда проверки выполнит проверку тега Init и создаст новую ветку с именем «Init».

Это приложение использует Axios для вызова Fake API для получения набора пользовательских данных. Этот API возвращает пользовательские данные в формате JSON.

Прежде чем мы сможем запустить наше приложение, обязательно выполните npm install

Если мы запустим это приложение, запустив npm run dev и перейдем по адресу http: // localhost: 1234 / users или http: // localhost: 1234 / users / 2

Единственная причина, по которой мой браузер отображается в указанном выше формате, - это расширение Chrome под названием JSON Viewer.

Подготовка вашей заявки

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

npm install --save-dev babel-jest jest @types/jest

Jest - Тестовый пакет, который мы собираемся использовать
@ Types / jest - Обеспечить IntelliSense и описать типы шуток.

Далее нам нужно предоставить некоторую конфигурацию Jest. В корневом каталоге вашего приложения создайте файл и назовите его «jest.config.js», вы можете разместить следующую конфигурацию

module.exports = {
  clearMocks: true,
  // An array of file extensions your modules use
  moduleFileExtensions: ['js', 'json', 'jsx'],
  coveragePathIgnorePatterns: [
    '<rootDir>/dist/',
    '<rootDir>/node_modules/',
    '<rootDir>/docs/',
    '<rootDir>/build/'
  ],
  testPathIgnorePatterns: [
    '<rootDir>/dist/',
    '<rootDir>/node_modules/',
    '<rootDir>/docs/',
    '<rootDir>/build/'
  ]
};

Полный список настроек Jest можно найти здесь. До сих пор создавался тег под названием Prep.

Чтобы получить код для тега, вы запускаете git checkout tags/Prep

Написание теста

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

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

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

#For Bash
mkdir src/controller/__tests__
touch ./src/controller/__tests__/users.test.js
#For Windows
mkdir src\controller\__tests__
type nul > src/controller/__tests__/users.test.js

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

Давайте рассмотрим этот тестовый файл. Этот тест показывает нам пример тестирования асинхронного кода.

«описать» - это ключевое слово Jest, которое дает нам возможность сгруппировать несколько тестов в блок.

«это» - это тестовый пример.

2 ключевых слова выше являются частью Jest Global. При написании тестового примера вы можете подойти к моменту, когда вам потребуется использовать Jest Lifecycle, чтобы установить переменную среды для каждого тестового примера или предварительно установить какое-то значение перед каждым или всеми тестами.

Тестирование асинхронной функции

Есть 4 способа выполнить тестирование асинхронной функции.

Строка 3 - Тестирование с использованием async и ожидание
Строка 8 - Тест можно выполнить с помощью метода done () (Обратный вызов)
Строка 15 - Тест, возвращая само обещание (Promise)
Использование .resolve и .reject. Подробнее здесь

Jest Matcher

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

Запуск теста

Прежде чем мы сможем запустить наш модульный тест, нам нужно включить скрипт в наш package.json.

"scripts": {
    "dev": "nodemon --exec babel-node src/index.js",
    "test": "jest"
  },

После этого выполните npm run test, и вы получите результат, как показано ниже.

Если вы провалите тест по какой-либо причине, вы увидите результат ниже

Тег Git: тест

Плагины Jest Watch

Jest Watch Plugins - отличный плагин для постоянного отслеживания изменений вашего кода. Этот плагин также предоставляет несколько интерактивных опций.

Мы можем добавить плагин часов, добавив следующее в package.json

"scripts": {
    "dev": "nodemon --exec babel-node src/index.js",
    "test": "jest",
    "test:watch": "jest --watchAll"
  }

Полный список Jest CLI можно найти по этой ссылке. Идите и выполните npm run test:watch, чтобы получить результат ниже.

В терминале / командной строке нажмите «w», чтобы увидеть дополнительные параметры.

Тег Git: WatchMode

Насмешливые функции

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

Прежде чем мы начнем, мы собираемся обновить приложение, передав URL-адрес API в функцию, а не жестко его кодируя.

Тег Git: обновление

После проверки кода из тега обновления попробуйте снова запустить тест. Все должно пройти.

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

Создайте папку под своей папкой src, назовите ее «__mocks__», создайте, зарегистрируйте и назовите ее «axios.js»

#For Bash
mkdir src/__mocks__
touch ./src/__mocks__/axios.js
#For Windows
mkdir src\__mocks__
type nul > src/__mocks__/axios.js

Все макеты, помещенные в папку __mocks__, автоматически имитируются. Чтобы узнать больше о Jest Mock, перейдите по этой ссылке и Jest Mock Functions.

Мы собираемся добавить следующий код в наш axios.js

Мы также собираемся обновить наш файл модульного теста (user.test.js), заменив URL на следующий

import { getUsers, getUserById } from '../user';
const url = 'https://www.mockurl.com/users/';
describe('Test Users', () => {
  it('should return a list of user', async () => {
    const result = await getUsers(url);Code Coverage Report
...
...
...

Что здесь произошло? Когда мы создаем фиктивную функцию, мы берем на себя фактический пакет axios npm с нашим собственным кодом, который был axios.js в нашей папке __mocks__. Создавая фиктивную функцию, всегда начинайте с понимания определения модуля, над которым вы издеваетесь. Вы можете проверить это, добавив журнал консоли после строки 28, и журнал консоли будет отображаться, когда вы вызываете GET с помощью axios.

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

Возвращаясь к axios.js, я использую jest.fn (). Это фиктивная реализация функции для шутки. Jest.fn () - это, по сути, шпион, который может следить за поведением функции. Это откроет совершенно разные способы выполнения наших утверждений, такие как .toHaveBeenCalled (), .toBeCalledTimes (число) и другие. Вы можете узнать больше о функции Jest Mock здесь и об ожидаемых данных, которые доступны вам при использовании функции mock здесь.

Теперь мы можем запустить наш тестовый пример, запустив npm run test, и вы получите тот же результат.

Тег Git: имитация

Отчет о покрытии кода

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

"scripts": {
    "dev": "nodemon --exec babel-node src/index.js",
    "test": "jest",
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --coverage"
  },

Теперь вы можете выполнить npm run test:coverage, и вы получите результат, аналогичный показанному ниже

Если вы заметили, он также не вернул тест из других файлов. Мы можем исправить это, обновив jest.config.js, включив в него

...
...
...
  testPathIgnorePatterns: [
    '<rootDir>/dist/',
    '<rootDir>/node_modules/',
    '<rootDir>/docs/',
    '<rootDir>/build/'
  ],
  collectCoverageFrom: ['src/**']
};

Добавив collectCoverageFrom теперь охват кода включает весь файл. Теперь, когда вы выполните npm run test:coverage, у вас будет больше непокрытого кода.

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

Список шпаргалок Jest можно найти по этой ссылке.

Полный исходный код можно найти на моем гитхабе Jest-Mock. Если у вас есть какие-либо вопросы, отзывы или вам нужна помощь, не стесняйтесь обращаться ко мне через connectedIn.