reassure
v1.3.0
React 및 React Native의 성능 테스트 동반자.
문서를 읽으십시오
reassure-tests.sh ).gitignorereassure-tests.sh )measureRenders 기능MeasureRendersOptions 유형measureFunction 기능 기능MeasureFunctionOptions 유형configureresetToDefaults 함수당신은 당신의 React Native 앱이 항상 잘 수행되기를 원합니다. 이 목표의 일환으로 앱을 프로필하고, 렌더 패턴을 관찰하고, 올바른 장소에서 회고록을 적용하는 등. .
Reassure를 사용하면 CI 또는 로컬 컴퓨터에서 React Native App Performance 회귀 테스트를 자동화 할 수 있습니다. 마찬가지로 앱이 여전히 올바르게 작동 하는지 자동으로 확인하는 통합 및 단위 테스트를 작성하면 앱이 여전히 작동하는지 확인하는 성능 테스트를 작성할 수 있습니다.
React 성능 테스트 라이브러리로 생각할 수 있습니다. 실제로 Reassure는 React Native Testing Library 테스트의 대부분을 재사용하고 가능한 한 설정하도록 설계되었습니다.
재평가는 당신이 제공하는 테스트 시나리오의 렌더 특성 (지속 시간 및 계수)을 측정하여이를 안정적인 버전과 비교하여 작동합니다. 런타임 환경으로 인한 렌더링 시간에서 임의의 변동의 영향을 줄이기 위해 시나리오를 여러 번 반복합니다. 그런 다음 통계 분석을 적용하여 코드 변경이 통계적으로 유의한지 확인합니다. 결과적으로 결과를 요약 한 사람이 읽을 수있는 보고서를 생성하고 CI에 표시하거나 풀 요청에 대한 의견으로 표시합니다.
구성 요소 렌더링 시간을 측정하는 것 외에도 일반 JavaScript 함수의 실행을 측정 할 수도 있습니다.
Reassure를 설치하려면 앱 폴더에서 다음 명령을 실행하십시오.
원사 사용
yarn add --dev reassureNPM 사용
npm install --save-dev reassure또한 작동 농지 설정과 React Native Testing Library 또는 React Testing Library 중 하나가 필요합니다.
설치 안내서를 참조하십시오.
예제 프로젝트를 확인할 수 있습니다.
Reassure는 설치 한 테스트 라이브러리를 감지하려고합니다. React Native Testing Library와 React Testing Library가 모두 있으면 이에 대해 경고하고 기본 테스트 라이브러리에 대응하기 위해 우선합니다. configure 옵션을 사용하여 사용할 테스트 라이브러리를 명시 적으로 지정할 수 있습니다.
configure ( { testingLibrary : 'react-native' } ) ;
// or
configure ( { testingLibrary : 'react' } ) ;JEST 설정 파일로 설정해야하며 필요한 경우 특정 테스트 파일을 재정의 할 수 있습니다.
라이브러리가 설치되었으므로 첫 번째 테스트 시나리오가 .perf-test.js / .perf-test.tsx extension이있는 파일에 다음을 작성할 수 있습니다.
// ComponentUnderTest.perf-test.tsx
import { measureRenders } from 'reassure' ;
import { ComponentUnderTest } from './ComponentUnderTest' ;
test ( 'Simple test' , async ( ) => {
await measureRenders ( < ComponentUnderTest / >);
} ) ; 이 테스트는 장착 및 결과 동기화 효과 중에 ComponentUnderTest 의 렌더링 시간을 측정합니다.
참고 : Resure는 Jest의
--testMatch옵션을 사용하여 테스트 파일 이름을 자동으로 일치시킵니다"**/__perf__/**/*.[jt]s?(x)", "**/*.(perf|perf-test).[jt]s?(x)". 그러나 사용자 정의--testMatch또는--testRegex옵션을 통과하려면reassure measure스크립트에 추가하여 자신의 글로벌을 통과 할 수 있습니다. Jest Docs의--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 Native Testing Library 방법을 사용하고 있습니다.
screen 헬퍼를 사용할 수없는 V10.1.0보다 낮은 React Native Testing Library 버전을 사용하는 경우 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 });
} ) ; 테스트에 비동기 변경 사항이 포함 된 경우, 시나리오가 이러한 변경 사항을 해결할 때까지 기다려야합니다. 예를 들어 RNTL의 findBy 쿼리, waitFor 또는 waitForElementToBeRemoved 기능을 사용하는 기능을 사용합니다.
첫 번째 테스트 성능을 측정하려면 터미널에서 다음 명령을 실행해야합니다.
yarn reassure 이 명령은 Jest를 사용하여 여러 번 테스트를 실행하여 성능 통계를 수집하고 .reassure/current.perf 파일에 작성합니다. 설정을 확인하려면 명령을 처음 실행 한 후 출력 파일이 존재하는지 확인하십시오.
참고 : 실수로 결과를 커밋하지 않도록 .gitignore 파일에
.gitignore파일에.reassure/폴더를 추가 할 수 있습니다.
ReassureSuressure CLI는 GIT를 사용할 때 소스 코드 브랜치 이름을 자동으로 감지하고 해시를 커밋하려고합니다. 다른 버전 제어 시스템을 사용하는 경우 이러한 옵션을 재정의 할 수 있습니다.
yarn reassure --branch [branch name] --commit-hash [commit hash] 성능 변경을 감지하려면 코드 전류 (수정 된 코드)와 기준선 (예 : 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 reassureCI 통합 및 모든 전제 조건을보다 편리하게 설정하기 위해, 우리는 당신이 시작하기 위해 필요한 모든 템플릿을 생성하기 위해 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/ directory를 끝까지 추가합니다.
reassure-tests.sh ) 성능 변경을 감지하려면 코드 전류 (수정 된 코드)와 기준선 (예 : 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를 구성해야합니다. 현재 출력을 제시하기 위해 모든 주요 CI 도구를 지원하는 Danger JS와 통합됩니다.
작업 위험 JS 설정이 필요합니다.
그런 다음 DangerFile에 Reassure Danger JS 플러그인을 추가하십시오.
// /<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 }}예제 GitHub 워크 플로를 확인할 수도 있습니다.
위의 예는 GitHub 작업을 기반으로하지만 다른 CI 구성 파일과 유사해야하며 그러한 경우에만 참조로만 사용해야합니다.
참고 : 성능 테스트는 정기적 인 통합 테스트보다 훨씬 오래 실행됩니다. 각 테스트 시나리오를 여러 번 실행하고 (기본적으로 10) 코드의 두 분기에 대해 반복하기 때문입니다. 따라서 각 테스트는 기본적으로 20 회 실행됩니다. 그 수를 훨씬 더 높이 늘리지 않는 한입니다.
React.Profiler 사용하여 성능 측정 중에 마이크로 초 정밀도로 React 구성 요소 렌더링 시간을 측정합니다. 이것은 기계에 따라 동일한 코드가 더 빠르거나 느리게 실행된다는 것을 의미합니다. 이러한 이유로 기준선 및 전류 측정은 동일한 기계에서 실행해야합니다. 최적으로, 그들은 차례로 실행해야합니다.
또한 CI 에이전트는 의미있는 결과를 얻으려면 안정적인 성능을 가져야합니다. 에이전트가 성능이 일치하는 한 빠르거나 느리게하는 것은 중요하지 않습니다. 그렇기 때문에 렌더링 시간 측정에 영향을 줄 수있는 다른 작업에 대한 성능 테스트 중에 에이전트를 사용해서는 안됩니다.
컴퓨터의 안정성을 평가할 수 있도록 reassure check-stability 명령을 사용할 수 있습니다. 현재 코드의 성능 측정을 두 번 실행하므로 기준선 및 현재 측정은 동일한 코드를 참조합니다. 이 경우, 예상되는 변화는 0% (변경 없음)입니다. 임의의 성능 변경 정도는 기계의 안정성을 반영합니다. 이 명령은 CI 및 로컬 머신에서 실행할 수 있습니다.
일반적으로 임의의 변화는 5%미만이어야합니다. 10% 이상의 결과가 너무 높은 것으로 간주되므로 기계의 안정성을 조정해야합니다.
참고 : 최후의 수단의 속임수로서, 더 많은 테스트 실행이 측정 변동을 심지 못한다는 가정에 따라 모든 테스트 또는 일부 테스트에 대해 기본값 10 ~ 20, 50 또는 100에서
run옵션을 늘릴 수 있습니다. 그러나 테스트가 더 길어집니다.
예제 Github 워크 플로를 참조 할 수 있습니다.
예를 살펴보면 테스트 시나리오를 특정 범주에 할당 할 수 있습니다.
measureRenders 기능 RNTL render 기능에 대한 사용자 정의 래퍼는 React.Profiler 구성 요소 내부에 전달 된 화면을 렌더링하여 성능을 측정하고 결과를 출력 파일로 작성합니다. 테스트의 측면을 사용자 정의 할 수있는 옵션 options 객체를 사용할 수 있습니다.
async function measureRenders (
ui : React . ReactElement ,
options ?: MeasureRendersOptions ,
) : Promise < MeasureResults > { MeasureRendersOptions 유형 interface MeasureRendersOptions {
runs ?: number ;
warmupRuns ?: number ;
wrapper ?: React . ComponentType < { children : ReactElement } > ;
scenario ?: ( view ?: RenderResult ) => Promise < any > ;
writeFile ?: boolean ;
}runs : 특정 테스트의 시리즈 당 실행 수warmupRuns : 실제 실행 전에 수행되고 폐기되는 추가 워밍업 런 수 (기본 1).wrapper : Provider 와 같은 반응 구성 요소는 ui 포장됩니다. 참고 : wrapper 자체의 렌더링 기간은 결과에서 제외됩니다. 랩핑 구성 요소 만 측정됩니다.scenario : RNTL 또는 RTL 함수를 사용하여 UI 내에서 사용자 상호 작용을 정의하는 사용자 정의 Async 함수writeFile : ( 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 : 파일의 이름은 레코드 testingLibrary 이름이 verbose 으로 저장됩니다. 예를 'react-native' render cleanup 로그를 더 많이 만들 수 'react' . render 및 cleanup 기능 configure function configure ( customConfig : Partial < Config > ) : void ; 함수 configure 은 기본 구성 매개 변수를 대체 할 수 있습니다.
resetToDefaults 함수 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리포지토리 및 개발 워크 플로에 기여하는 방법을 배우려면 기고 가이드를 참조하십시오.
MIT
Reassure는 오픈 소스 프로젝트이며 항상 자유롭게 사용할 수 있습니다. 이 프로젝트는 Entain과 긴밀한 파트너십을 통해 개발되었으며 원래 사내 프로젝트였습니다. React & React Native Ecosystem을 개발하려는 의지 덕분에 우리는 그것을 오픈 소스로 만들기로 결정했습니다. 시원하다고 생각되면 별다.
Callstack은 React 및 React Native 전문가 그룹입니다. 도움이 필요하거나 인사하고 싶다면 [email protected]으로 문의하십시오!
프로젝트처럼? ⚛️ 고객을 위해 놀라운 일을하고 원시 오픈 소스를 운전하는 Callstack 팀에 가입하십시오!
