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() { returnHello 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() { returnMy 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 в качестве помощника Дом.
- Насмешливый может быть сложно. Хорошо иметь хаки-издевательства.
Я надеюсь, что эта статья вдохновила вас принять тестирование вашего приложения с помощью шума, и вы будете мотивированы, чтобы добавить его в ваш рабочий процесс!