reassure
v1.3.0
Компаньон тестирования производительности для реагирования и реагирования родного.
Прочитайте документы
reassure-tests.sh ).gitignorereassure-tests.sh )measureRenders функционируютMeasureRendersOptions TypemeasureFunction функцииMeasureFunctionOptions тип типаconfigure функцииresetToDefaults FUNCTIONВы хотите, чтобы ваше нативное приложение React работало хорошо и быстро. В рамках этой цели вы профиляете приложение, наблюдаете за схемами рендеринга, применяете память в нужных местах и т. Д., Но все ручные и слишком легко непреднамеренно ввести регрессии производительности, которые будут пойманы только в течение QA или хуже, вашими пользователями Полем
Удовлетворение позволяет автоматизировать регрессионное тестирование на производительность приложений на CI или на локальной машине. Точно так же вы пишете свои интеграции и модульные тесты, которые автоматически проверяют, что ваше приложение все еще работает правильно , вы можете написать тесты на производительность, которые подтверждают, что ваше приложение все еще работает эффективно .
Вы можете думать об этом как о библиотеке тестирования производительности React. Фактически, Recodure предназначен для повторного использования как можно большую часть ваших тестов нативного тестирования и настройки нативных тестирования.
Утвердите работы, измеряя характеристики рендеринга - продолжительность и подсчет - сценария тестирования, который вы предоставляете, и сравнивая это с стабильной версией. Он повторяет сценарий несколько раз, чтобы уменьшить влияние случайных изменений в время рендеринга, вызванное средой выполнения. Затем он применяет статистический анализ, чтобы определить, являются ли изменения кода статистически значимыми. В результате он генерирует читаемый на человеке отчет, обобщающий результаты, и отображает его на CI или в качестве комментария к вашему запросу на привлечение.
В дополнение к измерению времени рендеринга компонента он также может измерить выполнение регулярных функций JavaScript.
Чтобы установить заверение, запустите следующую команду в папке приложения:
Используя пряжу
yarn add --dev reassureИспользуя NPM
npm install --save-dev reassureВам также понадобится рабочая шутка, а также одна из нативных библиотеки тестирования React или библиотеки реагирования.
См. Руководство по установке.
Вы можете проверить наши примеры проектов:
Удовлетворение попытается определить, какую библиотеку тестирования вы установили. Если присутствуют оба библиотека тестирования нативного тестирования, и библиотека реагирования, это предупредит вас об этом и даст приоритет для реагирования нативной библиотеки тестирования. Вы можете явно указать библиотеку тестирования, которая будет использоваться, используя параметр configure :
configure ( { testingLibrary : 'react-native' } ) ;
// or
configure ( { testingLibrary : 'react' } ) ;Вы должны установить его в файл настройки Jest, и вы можете переопределить его в конкретных тестовых файлах, если это необходимо.
Теперь, когда библиотека установлена, вы можете написать свой первый тестовый сценарий в файле с .perf-test.js / .perf-test.tsx расширение:
// ComponentUnderTest.perf-test.tsx
import { measureRenders } from 'reassure' ;
import { ComponentUnderTest } from './ComponentUnderTest' ;
test ( 'Simple test' , async ( ) => {
await measureRenders ( < ComponentUnderTest / >);
} ) ; Этот тест будет измерять время рендеринга ComponentUnderTest во время монтажа и полученных эффектов синхронизации.
ПРИМЕЧАНИЕ . Утверждает автоматически соответствовать тестовым именам файлов, используя опцию jest's
--testMatchсо значением"**/__perf__/**/*.[jt]s?(x)", "**/*.(perf|perf-test).[jt]s?(x)". Однако, если вы хотите передать пользовательскую опцию--testMatchили--testRegex, вы можете добавить его в скриптreassure measure, чтобы пройти свой собственный глобус. Подробнее о--testMatchи--testRegexв шутках
Если ваш компонент содержит любую асинхронную логику или вы хотите проверить какое -то взаимодействие, вам следует передать опцию scenario :
import { measureRenders } from 'reassure' ;
import { screen , fireEvent } from '@testing-library/react-native' ;
import { ComponentUnderTest } from './ComponentUnderTest' ;
test ( 'Test with scenario' , async ( ) => {
const scenario = async ( ) => {
fireEvent . press ( screen . getByText ( 'Go' ) ) ;
await screen . findByText ( 'Done' ) ;
} ;
await measureRenders ( < ComponentUnderTest / >, { scenario });
} ) ; Корпус функции scenario использует знакомые методы библиотеки библиотеки натуральных испытаний.
В случае использования версии нативной библиотеки тестирования React ниже, чем V10.1.0, где screen -помощник недоступен, функция scenario обеспечивает его как первый аргумент:
import { measureRenders } from 'reassure' ;
import { fireEvent } from '@testing-library/react-native' ;
test ( 'Test with scenario' , async ( ) => {
const scenario = async ( screen ) => {
fireEvent . press ( screen . getByText ( 'Go' ) ) ;
await screen . findByText ( 'Done' ) ;
} ;
await measureRenders ( < ComponentUnderTest / >, { scenario });
} ) ; Если ваш тест содержит какие -либо асинхронные изменения, вам нужно будет убедиться, что сценарий ждет этих изменений, например, с помощью запросов findBy , waitFor или waitForElementToBeRemoved от RNTL.
Чтобы измерить вашу первую тестовую производительность, вам нужно запустить следующую команду в терминале:
yarn reassure Эта команда будет запускать ваши тесты несколько раз, используя Jest, собирая статистику производительности и напишет их в файл .reassure/current.perf . Чтобы проверить настройку, проверьте, существует ли выходной файл после запуска команды в первый раз.
Примечание. Вы
.gitignoreдобавить.reassure/
Удовлетворение CLI автоматически попытается обнаружить имя вашего исходного кода и хэш филиала при использовании GIT. Вы можете переопределить эти параметры, например, если вы используете другую систему управления версиями:
yarn reassure --branch [branch name] --commit-hash [commit hash] Чтобы обнаружить изменения производительности, вы должны измерить производительность двух версий вашего Code Current (ваш модифицированный код) и базовой линии (ваша эталонная точка, например, main ветвь). Чтобы измерить производительность на двух ветвях, вы должны переключить ветви в GIT или клонировать две копии вашего репозитория.
Мы хотим автоматизировать эту задачу для запуска на CI. Для этого вам нужно будет создать сценарий тестирования производительности. Вы должны сохранить его в своем репозитории, например, как reassure-tests.sh .
Простая версия такого сценария с использованием подхода, изменяющего ветвь, заключается в следующем:
#! /usr/bin/env bash
set -e
BASELINE_BRANCH= ${GITHUB_BASE_REF := " main " }
# Required for `git switch` on CI
git fetch origin
# Gather baseline perf measurements
git switch " $BASELINE_BRANCH "
yarn install
yarn reassure --baseline
# Gather current perf measurements & compare results
git switch --detach -
yarn install
yarn reassureЧтобы создать настройку интеграции CI и всех предпосылок более удобной, мы подготовили команду CLI для создания всех необходимых шаблонов для вас, чтобы начать.
Просто беги:
yarn reassure initЭто генерирует следующую структуру файла
├── <ROOT>
│ ├── reassure-tests.sh
│ ├── dangerfile.ts/js (or dangerfile.reassure.ts/js if dangerfile.ts/js already present)
│ └── .gitignore
reassure-tests.sh )Основной сценарий, позволяющий запустить успокаивание на CI. Подробнее о важности и структуре этого файла в следующем разделе.
Если ваш проект уже содержит dangerfile.ts/js , CLI не будет переопределить его каким -либо образом. Вместо этого он будет генерировать файл dangerfile.reassure.ts/js , что позволит вам сравнивать и обновлять свой собственный в своем удобстве.
.gitignore Если присутствует файл .gitignore и не появится упоминания о reassure , сценарий добавит к .reassure/ .
reassure-tests.sh ) Чтобы обнаружить изменения производительности, вы должны измерить производительность двух версий вашего Code Current (ваш модифицированный код) и базовой линии (ваша эталонная точка, например, main ветвь). Чтобы измерить производительность на двух ветвях, вы должны переключить ветви в GIT или клонировать две копии вашего репозитория.
Мы хотим автоматизировать эту задачу для запуска на CI. Для этого вам нужно будет создать сценарий тестирования производительности. Вы должны сохранить его в своем репозитории, например, как reassure-tests.sh .
Простая версия такого сценария с использованием подхода, изменяющего ветвь, заключается в следующем:
#! /usr/bin/env bash
set -e
BASELINE_BRANCH= ${GITHUB_BASE_REF := " main " }
# Required for `git switch` on CI
git fetch origin
# Gather baseline perf measurements
git switch " $BASELINE_BRANCH "
yarn install
yarn reassure --baseline
# Gather current perf measurements & compare results
git switch --detach -
yarn install
yarn reassureВ качестве окончательного шага настройки вы должны настроить ваш CI для запуска сценария тестирования производительности и вывести результат. Для представления вывода в настоящее время мы интегрируемся с Danger JS, которая поддерживает все основные инструменты CI.
Вам понадобится настройка рабочей опасности JS.
Затем добавьте плагин Danger Danger JS в свой DangerFile:
// /<project_root>/dangerfile.reassure.ts (generated by the init script)
import path from 'path' ;
import { dangerReassure } from 'reassure' ;
dangerReassure ( {
inputFilePath : path . join ( __dirname , '.reassure/output.md' ) ,
} ) ; Если у вас еще нет DangerFile ( dangerfile.js или dangerfile.ts ), вы можете использовать тот, который генерируется сценарием reassure init , не внося никаких дополнительных изменений.
Это также в нашем примере файлов dangerfile.
Наконец, запустите как сценарий тестирования производительности, так и опасность в вашей конфигурации CI:
- name : Run performance testing script
run : ./reassure-tests.sh
- name : Run Danger.js
run : yarn danger ci
env :
GITHUB_TOKEN : ${{ secrets.GITHUB_TOKEN }}Вы также можете проверить наш пример Workflow GitHub.
Приведенный выше пример основан на действиях GitHub, но он должен быть аналогичен другим файлам конфигурации CI и должен служить только ссылкой в таких случаях.
Примечание . Ваш тест на производительность будет работать намного дольше, чем обычные интеграционные тесты. Это потому, что мы запускаем каждый тестовый сценарий несколько раз (по умолчанию, 10) и повторяем его для двух ветвей вашего кода. Следовательно, каждый тест будет работать 20 раз по умолчанию. Это, если вы не увеличиваете это число еще выше.
Мы измеряем время рендеринга реагирования с микросекундной точностью во время измерений производительности с использованием React.Profiler . Это означает, что тот же код будет работать быстрее или медленнее, в зависимости от машины. По этой причине базовые и токовые измерения должны выполняться на одной и той же машине. Оптимально, они должны запускать один за другим.
Более того, ваш агент CI должен иметь стабильную производительность для достижения значимых результатов. Не имеет значения, является ли ваш агент быстрым или медленным, если он последовательен в своей производительности. Вот почему агент не должен использоваться во время испытаний на производительность для любой другой работы, которая может повлиять на время измерения.
Чтобы помочь вам оценить стабильность вашей машины, вы можете использовать команду reassure check-stability . Он выполняет измерения производительности дважды для текущего кода, поэтому базовые и текущие измерения относятся к одному и тому же коду. В таком случае ожидаемые изменения составляют 0% (без изменений). Степень случайных изменений производительности будет отражать стабильность вашей машины. Эту команду можно запустить как на CI, так и на местных машинах.
Обычно случайные изменения должны быть ниже 5%. Результаты 10% и более считаются слишком высокими, что означает, что вы должны работать над настройкой стабильности вашей машины.
Примечание . В качестве хитрости последней курорта вы можете увеличить опцию
runс значения по умолчанию от 10 до 20, 50 или даже 100 для всех или некоторых из ваших тестов, исходя из предположения, что больше тестов будет выровнять колебания измерений. Это, однако, заставит ваши тесты работать еще дольше.
Вы можете обратиться к нашему примеру рабочего процесса GitHub.
Глядя на пример, вы можете заметить, что тестовые сценарии могут быть назначены определенным категориям:
measureRenders функционируют Пользовательская обертка для функции render RNTL, ответственной за то, чтобы отобразить пропущенный экран внутри компонента React.Profiler , измеряя его производительность и записи результатов в выходной файл. Вы можете использовать дополнительный объект options , который позволяет настраивать аспекты тестирования
async function measureRenders (
ui : React . ReactElement ,
options ?: MeasureRendersOptions ,
) : Promise < MeasureResults > { MeasureRendersOptions Type interface MeasureRendersOptions {
runs ?: number ;
warmupRuns ?: number ;
wrapper ?: React . ComponentType < { children : ReactElement } > ;
scenario ?: ( view ?: RenderResult ) => Promise < any > ;
writeFile ?: boolean ;
}runs : количество пробежек на серию для конкретного тестаwarmupRuns : количество дополнительных прогрева, которые будут выполнены и отброшены до фактических пробежек (по умолчанию 1).wrapper : React Component, такой как Provider , с которым будет обернут ui . Примечание. Продолжительность рендеринга самой wrapper исключена из результатов; Измеряется только обернутый компонент.scenario : пользовательская асинхронная функция, которая определяет взаимодействие пользователя в пользовательском интерфейсе с помощью функций RNTL или RTLwriteFile : ( true по умолчанию) должен записать вывод в файл. measureFunction функции Позволяет обернуть любую синхронную функцию, измерить время выполнения и записать результаты в выходной файл. Вы можете использовать дополнительные options для настройки аспектов тестирования. Примечание. Подсчет выполнения всегда будет одним.
async function measureFunction (
fn : ( ) => void ,
options ?: MeasureFunctionOptions
) : Promise < MeasureResults > { MeasureFunctionOptions тип типа interface MeasureFunctionOptions {
runs ?: number ;
warmupRuns ?: number ;
}runs : количество пробежек на серию для конкретного тестаwarmupRuns : Количество дополнительных прогрева, которые будут выполнены и отброшены до фактических пробежек. Конфигурация по умолчанию, которая будет использоваться сценарием измерения. Этот объект конфигурации может быть переопределен с использованием функции configure .
type Config = {
runs ?: number ;
warmupRuns ?: number ;
outputFile ?: string ;
verbose ?: boolean ;
testingLibrary ?:
| 'react-native'
| 'react'
| { render : ( component : React . ReactElement < any > ) => any ; cleanup : ( ) => any } ;
} ; const defaultConfig : Config = {
runs : 10 ,
warmupRuns : 1 ,
outputFile : '.reassure/current.perf' ,
verbose : false ,
testingLibrary : undefined , // Will try auto-detect first RNTL, then RTL
} ; runs : количество повторяющихся прогонов в серии за тест (обеспечивает более высокую точность, агрегируя больше данных). Следует обращаться с осторожностью.
warmupRuns : количество дополнительных прогрева, которые будут выполнены и отброшены до фактических пробежек. outputFile : Имя файла 'react-native' Записи будут сохранены в verbose : 'react' все большее количество журнала, например, для cleanup render testingLibrary функции render и cleanup configure функции function configure ( customConfig : Partial < Config > ) : void ; Функция configure может переопределить параметры конфигурации по умолчанию.
resetToDefaults FUNCTION resetToDefaults ( ) : void Сбросить текущую конфигурацию в исходный объект defaultConfig
Вы можете использовать доступные переменные окружающей среды для изменения настройки вашего тестового бегуна.
TEST_RUNNER_PATH : альтернативный путь для вашего тестового бегуна. По умолчанию в 'node_modules/.bin/jest' или на Windows 'node_modules/jest/bin/jest'TEST_RUNNER_ARGS : набор аргументов, поданных бегуну. По умолчанию '--runInBand --testMatch "**/__perf__/**/*.[jt]s?(x)", "**/*.(perf|perf-test).[jt]s?(x)"'Пример:
TEST_RUNNER_PATH=myOwnPath/jest/bin yarn reassureСм. Руководство по содействию, чтобы узнать, как внести свой вклад в репозиторий и рабочий процесс разработки.
Грань
Удовлетворение - это проект с открытым исходным кодом, который всегда останется свободным для использования. Проект был разработан в тесном партнерстве с Entain и первоначально был их собственным проектом. Благодаря их готовности разработать нативную экосистему React & React, мы решили сделать ее с открытым исходным кодом. Если вы думаете, что это круто, пожалуйста, смотрите на него?
CallStack - это группа React и реагирует нативных экспертов. Если вам нужна помощь с ними или вы хотите сказать привет, свяжитесь с нами по адресу [email protected]!
Нравится проект? ⚛ Присоединяйтесь к команде Callstack, которая делает удивительные вещи для клиентов и побуждения React React Native Open Source!
