Рубрики
Без рубрики

DOM тестирование реагирования приложения с шумом

В этом посте мы посмотрим на установку шума и начать работу с DOM-тестированием приложения React.

Автор оригинала: pkodmad.

Jest это тестовый бегун для тестирования кода JavaScript.

Тестовый бегун – это программное обеспечение, которое ищет тесты на вашу кодовую базу и запускает их. Это также заботится о том, чтобы отобразить результат на интерфейсе CLI. И когда дело доходит до шума, он может похвастаться иметь очень быстро Испытание тестирования, так как он работает параллельно.

Ключевая особенность

  • Простая настройка : Для тривиальных случаев jest Может быть запущен без какой-либо конфигурации. И если необходимо, jest также предоставляет множество способов настроить тесты, предоставляя соответствующие параметры в Package.json или как отдельный jest.config.js файл.
jest --config jest.config.js
  • Тестирование снимков : Многое было написано о таком виде тестирования. Jest предоставляет способ взять «снимки» ваших компонентов DOM, что, по сути, файл с HTML из визуализации компонента хранится как строка. Снимки являются читаемыми людьми и действуют как индикатор любого изменения DOM из-за изменений кода компонента.

  • Насмешливый : Jest обеспечивает легкие способы автомагистрали или вручную сущности. Вы можете высмеивать функции и модули, которые не относятся к вашему тесту. Jest также предоставляет поддельные таймеры для вас контролировать Сетримс Семья функций в тестах.

  • Интерактивные CLI : Jest имеет режим часов, который смотрит на любой тест или соответствующие изменения кода, и повторно запускает соответствующие тесты. Часы располагают интерактивной функцией, в котором он предоставляет параметры для выполнения всех тестов или исправить снимки, в то время как в сам режим Watch. Это невероятно удобно.

  • Метрики покрытия : Jest предоставляет некоторые потрясающие метрики покрытия прямо из коробки.

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

jest --coverage

Настройка шума

В этом посте мы посмотрим на установку шума и начать работу с DOM-тестированием приложения React. Теоретически эти методы могут быть использованы с другими структурами просмотра, такими как деку , преобразование и так далее. Но могут возникнуть проблемы с нахождением правильного рендеринга Utils, которые являются зрелыми и функциями богатыми.

Установить jest для вашего проекта

npm install --save-dev jest

Добавить NPM Test скрипт

Package.json.

{
    ...
    scripts: {
        ...
        test: 'jest --watch --verbose'
    }
    ...
}

Тестирование DOM

В следующих примерах мы будем в основном проверить тривиальные методы общих зон тестирования для предельного приложения.

Это включает в себя:

  • Основные тестирования DOM
  • Моделирование событий и тестирование
  • Моделирование событий окна

Код выборки можно найти в jest-blog-образцы

Базовый тест DOM

Сам приложение состоит из реагированного компонента Приложение который печатает Div С текстом “Привет, шут из реагирования”.

index.js.

import React, {Component} from 'react';
import {render} from 'react-dom';

export default class App extends Component {
    render() {
        return 
Hello jest from react
; } } render(, document.body)

Приведенное выше приложение связано с использованием WebPack

Мой первый тест – проверить, если Приложение Компонент оказывает Div Отказ

index.test.js.

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


describe('The main app', () => {
    it('the app should have text', () => {
        const app  = shallow();
        expect(app.contains(
Hello jest from react
)).toBe(true); }) })

Давайте сломаемся.

  • Нам нужно импортировать реагировать (с целью использования JSX ) и Приложение (для экземпляра и тестирования) источника.
  • Фермент Это утилита для проверки JavaScript, которая помогает рендерировать компоненты реагирования для тестирования. Достаточно смешно, многие люди думают, что они должны выбрать между реагированием и ферментом, и это Учебное пособие прояснит это использование. Но для этого учебника мы будем использовать его до неглубокий рендер наше Приложение Компонент и проверка полученного дерева.
  • Мы описываем тестовый люкс с именем «Основное приложение».
  • Наш первый тест назван «Приложение должно иметь текст».
  • Мы неглубокий рендер Наш компонент и хранить его в Const Отказ
  • Добавить ожидать Утверждение для приложения, чтобы содержать ожидаемое Div Отказ

Запустить тест с шумом

Предполагая, что jest установлен локально для приложения, и вы настроили Тест Сценарий в Package.json Как рекомендуется, давайте сначала запустите тестовый бегун.

npm run test 

Это автоматически находит тесты, которые будут выполняться. При необходимости можно указать TestPathDireteries и TestignorePaths Отказ

 FAIL  __tests__/index.test.js
  ● Test suite failed to run

    SyntaxError: /Users/pavithra.k/Workspace/jest-blog-samples/dom-testing/__tests__/index.test.js: Unexpected token (8:29)
       6 | describe('The main app', () => {
       7 |     it('the app should have text', () => {
    >  8 |         const app  = shallow();
         |                              ^
       9 |         expect(app.contains(
Hello jest from react
)).toBe(true); 10 | }) 11 | }) at Parser.pp.raise (node_modules/babylon/lib/index.js:4215:13) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 1.07s Ran all test suites.

У нас есть первый неудачный тест!

Ошибка в основном указывает на синтаксическую ошибку. Это связано с тем, что наш тестовый код записан в ES2015, и он не транспирован и готов к узлу.

Это означает, что Jest необходимо предварительно получить наш тестовый код и импортированный исходный код на ES5. Для этого шума имеет большую интеграцию с Варить

Добавить поддержку Babel

Добавить .babelrc Файл к вашему приложению. В этом вы можете указать плагины Babel, необходимые для транспортировки каждого Особенность ES2015 что ваша приложение использует. Бабел Обеспечивает отличные пресеты для реагировать и ES2015 Отказ Предустановки – это просто сбор соответствующих плагинов Babel для логического набора преобразований.

Jest поставляется с встроенным препроцессором Babel, называемый Бабел-шутмай Отказ По сути, это просто транспортирует все тесты, прежде чем запустить их, если есть .babelrc Файл, присутствующий в приложении.

Сейчас на ходу шума, у нас есть:

 PASS  __tests__/index.test.js
  The main app
    ✓ the app should have text (8ms)

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

Проверьте выполнение события

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

Мы намерены создать компонент приложения, который накапливается. Это должно изменить текст, отображаемый после нажатия тела.

Чтобы проверить этот компонент, нам нужно:

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

тесты /index.test.js.

import React from 'react';
import App, {DEFAULT_TEXT, CLICKED_TEXT} from '../index';
import {shallow} from 'enzyme';

describe('The main app', () => {
    let app;
    beforeEach(() => {
        app  = shallow();
    })

    it('the app should have text', () => {
        expect(app.text()).toBe(DEFAULT_TEXT);
    })
    it ('should change text on click', () => {
        app.simulate('click');
        expect(app.text()).toBe(CLICKED_TEXT);
        app.simulate('click');
        expect(app.text()).toBe(DEFAULT_TEXT);
    })
})

Quest предоставляет нам следующее Методы глобального тестирования

describe(name,fn), it(name, fn), test(name, fn)

Это основные инструменты в среде тестирования JavaScript Арсенал Отказ

  • Опишите используется для группировки набора связанных тестов в A Тестовый люкс Отказ
  • Это или Тест Используется для записи вашего фактического теста, где вы можете создать независимую среду и тестировать определенные единицы или поведение.
afterEach(fn)/beforeEach(fn)/afterAll(fn)/beforeAll(fn)

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

Сохраняя вышеуказанную информацию в контексте, мы пишем Rebedeach Функция, которая создает неглубокий рендеринг кнопки Приложение Отказ После этого мы пишем наши тесты для каждого поведения, которое мы ожидаем от компонента. Enzyme имеет Букет помощников API проверять оказанный объект. Мы можем использовать их для проверки оказанных DOM для желаемых изменений.

Соответствующий актектор реагирования будет выглядеть так:

index.js.

import React, {Component} from 'react';
import {render} from 'react-dom';

export const DEFAULT_TEXT = "Hello jest from react";
export const CLICKED_TEXT = "This has been clicked";

export default class App extends Component {
    constructor() {
        super();
        this.state = {
            clicked: false
        }
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return 
{this.state.clicked ? CLICKED_TEXT : DEFAULT_TEXT}
; } handleClick() { this.setState({ clicked: !this.state.clicked }) } } render(, document.body)

Тестирование о событии окна

Много раз наши приложения имеют функциональность реагировать на внешние стимулы, такие как окно События. Мы хотели бы проверить, если наше приложение ведет себя правильно в этих условиях. Для этого нам придется насместить Документ и Документ. Window объект.

Мы будем использовать Jsdom API, который обеспечивает способ притворяться Документ и окно объекты.

npm install --save-dev jsdom

Сейчас мы собираемся использовать JSDOD для провода наших поддельных объектов. Поскольку эта деятельность должна произойти перед каждым тестом, поскольку любой из них может захотеть объект окна, мы напишем этот код на setupfile которые можно настроить в шуме.

Перейти к себе Package.json или jest.config.js Файл и добавьте следующее вариант

Package.json.

jest: {
    "setupFiles" : ["/setupFile.js"]
}

setupfile.js.

import {jsdom} from 'jsdom';

const documentHTML = '
'; global.document = jsdom(documentHTML); global.window = document.parentWindow; global.window.resizeTo = (width, height) => { global.window.innerWidth = width || global.window.innerWidth; global.window.innerHeight = width || global.window.innerHeight; global.window.dispatchEvent(new Event('resize')); };

Обратите внимание, что вышеуказанный код также дает нам Div элемент с идентификатором корень Отказ Теперь мы можем Гора Наш комментарий реагирования на этот элемент для включения в домо.

Также Resizeto не будет определен по умолчанию в этой подделке окно объект. Это вернется undefined Отказ Следовательно, нам нужно также высмеивать всю функцию. Вам нужно будет сделать это, чтобы вызвать любое событие на окно с вашего теста. В настоящее время я обеспокоен только Innerwidth и Innerheight Параметры. Следовательно, я буду обновлять их только как часть издевательства.

Наш код приложения для этого теста является компонентом реагирования, который отвечает на окно изменение события. Если изменить размер результатов в Innerwidth> 1024 Тогда это меняет свой ширина к 350 Отказ Если нет ширина Отказ

src/app.js.

import React, {Component} from 'react';

export const WIDTH_ABOVE_1024 = 350;
export const WIDTH_BELOW_1024 = 300;
export const THRESHOLD_WIDTH = 1024;

export default class App extends Component {
    constructor() {
        super();
        this.state = {
            width: window.innerWidth > THRESHOLD_WIDTH ? WIDTH_ABOVE_1024: WIDTH_BELOW_1024
        }
        this.handleResize = this.handleResize.bind(this);
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleResize)
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize)
    }
    render() {
        return 
My width is {this.state.width}
; } handleResize() { this.setState({ width: window.innerWidth > THRESHOLD_WIDTH ? WIDTH_ABOVE_1024 : WIDTH_BELOW_1024 }) } }

Для вышеуказанного компонента мы снова должны проверить, если:

  • Поведение по умолчанию.
  • Изменить размер ширина> 1024.
  • Изменить размер ширина

SRC/app.test.js.

import React from 'react';
import App, {WIDTH_ABOVE_1024, WIDTH_BELOW_1024, THRESHOLD_WIDTH} from './App';
import {mount} from 'enzyme';

describe('The main app', () => {
    let app;
    beforeEach(() => {
        app = mount(, {attachTo: document.getElementById('root')});
    })

    it('the app should have text', () => {
        var width = window.innerWidth > THRESHOLD_WIDTH ? WIDTH_ABOVE_1024 : WIDTH_BELOW_1024;
        expect(app.text()).toBe("My width is " + width);
        app.unmount();
    })
    it ('should change text on click', () => {
        window.resizeTo(1000, 1000);
        expect(app.text()).toBe("My width is " + WIDTH_BELOW_1024);
        window.resizeTo(1025, 1000)
        expect(app.text()).toBe("My width is " + WIDTH_ABOVE_1024);
        app.unmount();
    })
})

Что нужно отметить:

  • Мы можем полностью использовать константы компонента для тестирования.
  • Как только вы Гора Ваше приложение, используя фермент, вам также нужно Размонтировать () Это в конце каждого теста.
  • window.resizeto будет вызвать изменение window.innerwidth Отказ Код приложения Rerenders согласно логике приложения, и мы можем проверить напечатанную ширину.

Ключевые вынос

  • Тестирование сейчас легче, чем раньше с шумом.
  • Тестирование DOM с реактивным энзимом в качестве рендерера UTIL и JSDOM в качестве помощника Дом.
  • Насмешливый может быть сложно. Хорошо иметь хаки-издевательства.

Я надеюсь, что эта статья вдохновила вас принять тестирование вашего приложения с помощью шума, и вы будете мотивированы, чтобы добавить его в ваш рабочий процесс!