Тестирование с помощью Jest и Enzyme in React - Часть 2 (Как интегрировать Enzyme с Jest при тестировании?)

В предыдущем руководстве мы узнали Как настроить и запустить тест с помощью Jest? ». В этом руководстве мы узнаем Как интегрировать Enzyme с Jest при тестировании?.

Во-первых, у вас должен быть проект под названием «testing-demo-app», который я создал в предыдущем руководстве. Вы можете найти его в ветке под названием tutorial-01 в репозитории git ниже.

Шаг 1 - Установка фермента

• Перейдите в каталог проекта, откройте терминал и введите следующее, чтобы установить зависимости Enzyme dev.

npm install --save-dev enzyme enzyme-adapter-react-16

Шаг 2. Установка babel-preset-env

• Теперь вам нужно установить пресеты babel следующим образом.

npm install --save-dev babel-preset-env

• babel-preset-env - это интеллектуальная предустановка, которая позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие преобразования синтаксиса (и, возможно, полифиллы браузера) необходимы вашей целевой среде (средам). Если вы не установите это, вы можете получить ошибки из-за невозможности идентифицировать операторы импорта (ES6) в файлах js. Обратитесь к https://babeljs.io/docs/en/babel-preset-env для получения дополнительных сведений.

Теперь ваш файл package.json должен иметь следующие зависимости.

{
  "name": "testing-demo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-preset-react-app": "^7.0.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1"
  }
}

Шаг 3 - Конфигурация для babel (.babelrc)

• Создайте файл с именем .babelrc в папке проекта со следующим содержимым.

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

Шаг 4 - Настройка для Jest

• Создайте файл с именем setupTests.js в папке testing-demo-app / test со следующим содержанием.

import React from 'react';
import Enzyme, { shallow, render, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';;
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.React = React;
global.shallow = shallow;
global.render = render;
global.mount = mount;

• Создайте файл с именем jest.config.js в папке проекта со следующим содержимым.

module.exports = {
    setupFiles: [
        '<rootDir>/test/setupTests.js',
    ]
};

Цель этой конфигурации - указать Jest выполнить этот файл setupTests.js при запуске тестов, чтобы переменные, объявленные в этом файле как глобальные, можно было использовать в тестах. что мы собираемся написать.

Теперь файловая структура вашего проекта должна быть следующей.

Шаг 5 - Измените приложение

• Создайте папку с именем components внутри папки testing-demo-app / src и создайте внутри нее файл с именем Add.js со следующим содержимым.

import React, { Component } from 'react';

class Add extends Component {
  render() {
    return (
      <div className="App">
       <h1>Add Function</h1>
      </div>
    );
  }
}

export default Add;

• Измените файл App.js в файле testing-demo-app / src следующим образом.

import React, { Component } from 'react';
import Add from './components/Add';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Add />
        </header>
      </div>
    );
  }
}

export default App;

Теперь файловая структура вашего проекта должна быть следующей.

Теперь откройте терминал в каталоге проекта и запустите npm start. Следующая страница должна отображаться во время работы приложения.

Шаг 6. Напишите простой тест с помощью Enzyme with Jest.

• В папке testing-demo-app / test создайте файл с именем Add.test.js со следующим содержанием.

import Add from '../src/components/Add';
describe('<Add /> rendering', () => {
    it('should render one <h1>', () => {
        let wrapper = shallow(<Add />);
        expect(wrapper.children('h1')).toHaveLength(1);
    });
});

Здесь мы собираемся проверить, есть ли в выводе при рендеринге один ‹h1› элемент.

Теперь файловая структура вашего проекта должна быть следующей.

• Откройте терминал и запустите тесты, набрав npm test.

Теперь вы можете видеть, что два набора тестов прошли успешно, это наш предыдущий тест - demo.test.js с Jest и новый тест Add.test.js с Jest и Enzyme. Итак, мы можем прийти к выводу, что при рендеринге на выходе присутствует один ‹h1› элемент.

Заключение

Вы можете найти работу, которую мы проделали в этом руководстве, в ветке под названием tutorial-02 в репозитории git ниже.

В следующем руководстве я кратко объясню «Рекомендации по тестированию с помощью Jest и Enzyme», так что это очень поможет вам, прежде чем переходить к более глубокому кодированию. А пока, до свидания!

Предыдущее руководство

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