Добавление тестирования в проект React TypeScript с помощью Jest за 4 простых шага

Использование

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/typescript-jest
npm install
npm run type-check
npm test

Предпосылка

Пожалуйста, ознакомьтесь с пакетом TypeScript, чтобы
понять настройку TypeScript, прежде чем продолжить работу с этим руководством.

Шаг 1. Установка

npm install --save-dev jest @types/jest @babel/preset-typescript
Вот для чего предназначен каждый пакет:

• jest это средство выполнения тестов и фреймворк, который выполняет наши тесты и вспомогательные функции.
• @types/jest– это библиотека типов, которая обеспечивает набор текста и интеллект для глобальных ключевых слов, таких как describe и it в нашем тестовом файле. Это создает безопасность типов более надежной для файлов и обеспечивает лучшую поддержку IDE.
• @babel/preset-typescript переносит тесты, написанные на TypeScript, в JavaScript, чтобы Jest мог их понять.

Шаг 2. Добавление предустановки Babel

Добавление "@babel/preset-typescript"в .babelrc в корневом каталоге. Должно получиться так:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
  "plugins": []
}

Шаг 3. Добавление тестов

Я добавил тесты, написанные с использованием ReactTestUtils, в App.test.tsx файл для App.tsx. На этом этапе вы можете использовать менее подробные вспомогательные библиотеки для тестирования, такие как Enzyme и React-Testing-Library.

import * as React from "react";
import {act} from 'react-dom/test-utils';
import * as ReactDOM from "react-dom";
import {App} from "./App";

describe('App', function () {
   it('should display pass in number', function () {
       let container = document.createElement('div');
       document.body.appendChild(container);
       act(() => {
           ReactDOM.render(<App num={191}/>, container);
       })
       const header = container.querySelector('h1');
       expect(header.textContent).toBe("Hello world React! Num: 191")
   });
});

Шаг 4. Запуск тестов

Добавление кода npm package.json следующим образом:

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

Запуск нашего теста, используя npm test.