Начните с тестирования React: Jest & Enzyme — 4 простых шага

Минималистичная реализация Jest и Enzyme для тестирования проектов React.

Попробуйте СЕЙЧАС!

git clone 
cd react-playbook/packages/jest-enzyme
npm install
npm test

Шаг 1: Добавьте зависимости

Следовать react-basics учебник и после этого выполните следующую команду:

npm install --dev jest enzyme enzyme-adapter-react-16 @types/jest`

Вот для каждого пакета для:

• jest это средство запуска тестов и платформа, которая выполняет наши тесты и вспомогательные функции поставщиков для утверждений.
• enzyme это вспомогательная библиотека для тестирования, которая позволяет нам визуализировать компоненты React в виртуальной модели DOM и предоставляет метод
  для проверки дерева DOM на наличие определенных компонентов и их свойств. Подумайте о JQuery, но о компонентах React для тестирования.
• enzyme-adapter-react-16 является адаптером между React и Enzyme. Это будет выполнено перед запуском тестов.
• @types/jest это библиотека типов, которая обеспечивает типизацию и интеллект для глобальных ключевых слов шутки, таких как describe а также it в нашем тестовом файле. Это делает безопасность типов более надежной для файлов типов и обеспечивает лучшую поддержку IDE для
  тестовые файлы.

Шаг 2: Добавьте ферментный адаптер для React

• добавить файл настройки теста с адаптером фермента, который выполняется перед каждым тестом в ./setupTests.js

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

Шаг 3: Подключите тест настройки

• укажите на установочный файл с помощью jest собственность в package.json.

"jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.js"
    ]
  }

Шаг 4: Добавьте и запустите тесты

Для <App/> компонент в ./src:

import React from "react";

export const App = () => <h1>Hello world React!</h1>;

мы можем добавить следующий тестовый файл:

import React from 'react';
import { shallow } from "enzyme";
import { App } from "./App";

describe('Test App Entry point', function () {
  it('should have a header tag with Hello world React!', function () {
    const wrapper = shallow(<App/>);
    expect(wrapper.find("h1").text()).toEqual("Hello world React!");
  });
});

describe блок группирует набор тестов, окруженных it блоки, как показано выше. Желательно вложить несколько
describe блоки для логического разделения объема каждого теста. it блоки в идеале должны содержать только один
утверждение.

Теперь запустите тест, используя npm test. Вы должны увидеть тестовый проход следующим образом:

$ npm test

> jest-enzyme@0.0.0 test C:\Users\rajje\WebstormProjects\react-playbook\packages\jest-enzyme
> jest

PASS src/App.test.js
  Test App Entry point
    √ should have a header tag with Hello world React! (6 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.967 s, estimated 2 s
Ran all test suites.

Ознакомьтесь с другими руководствами по быстрому старту React

Используя эти стартеры, я быстро приобретаю практические знания об этих библиотеках и уверенно применяю их в сложных проектах. Репозиторий Github