Начало работы с тестированием на реагирование: библиотека тестирования реагирования и шума

Минималистичная реализация библиотеки тестирования реагирования

Применение

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/react-testing-library
npm install
npm test

Предварительное условие

Пожалуйста, завершите учебное пособие в [ Реактивные основы ] (https://github.com/rajjeet/react-playbook/tree/master /packages/raction-basic) Перед началом этого учебника или скопируйте и вставьте указанные выше команды, чтобы избежать руководства настраивать

Шаг 1: Установить

NPM Установка –save-dev @ Тестирование-библиотека/ract jest @ Типы/jest stretier

@ Тестирование-библиотека/Реагирование – Тестирование библиотеки утилиты
jest – Френда тестирования для JavaScript и React Code
@ Типы/Через – Тип определения для шума для Skyscript и IDE Intellisense
Прекраснее – используется шумами для форматирования встроенных снимков

Шаг 2: Добавить файл babelrc

Убедитесь, что у вас есть .babelrc В корневом каталоге со следующим содержимым:

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

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

Для <Приложение/> Компонент в SRC каталог, добавьте следующий тест в App.test.js :

src/app.js.

import React from "react";

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

SRC/app.test.js.

import React from "react";
import { render } from "@testing-library/react";
import { App } from "./App";

describe("App Component", function () {
  it("should have hello world message", function () {
    let { getByText } = render();
    expect(getByText("Hello world React!")).toMatchInlineSnapshot(`
      
        Hello world React!
      
    `);
  });
});

Импортированный Render () Функция от RTL используется для отображения компонента приложения. Вывод Render () Исполнение функции дает нам функции запроса, которые мы можем использовать для создания утверждений о компоненте. Примечание. Поскольку мы используем функцию запроса прямо из Render () Функция, поиск связывается с компонентом вместо всего документа. Это нормально, так как мы пишем модульные тесты, но этот синтаксис похож на интеграцию Тестирование.

Tomatchinlinesnapshot () Используется так, что нам не нужно писать и отформатировать ожидаемый выход.

Чтобы запустить тест, введите NPM Test в каталоге. Вы должны увидеть это:

> jest

PASS src/App.test.js
  App Component
    √ should have hello world message (20 ms)

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

Оформить заказ другой React React Starters

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