reassure
v1.3.0
績效測試伴侶的反應和反應天然。
閱讀文檔
reassure-tests.sh ）.gitignorereassure-tests.sh ）measureRenders功能MeasureRendersOptions類型measureFunction功能MeasureFunctionOptions類型configure功能resetToDefaults函數您希望您的React Antive應用程序始終保持良好和快速。作為此目標的一部分，您可以介紹該應用程序，觀察渲染模式，在正確的位置進行記憶等。但是，這都是手動的，而且太容易無意識地引入性能回歸，只有在QA或更糟的情況下才能被用戶捕獲。 。
放心使您可以在CI或本地機器上自動化React Arect Aptial App Repression測試。以同樣的方式，您編寫了集成和單元測試，以自動驗證您的應用程序仍然正常工作，可以編寫性能測試，以驗證您的應用程序仍在執行性能。
您可以將其視為React性能測試庫。實際上，放心旨在重複使用盡可能多的React本機測試庫測試和設置。
通過測量您提供的測試方案的渲染特性（持續時間和計數），並將其與穩定版本進行比較，可以放心。它多次重複該方案，以減少由運行時環境引起的渲染時間隨機變化的影響。然後，它應用統計分析以確定代碼更改是否具有統計學意義。結果，它生成了一份人類可讀報告，匯總了結果並在CI上顯示，或者是對您的拉請請求的評論。
除了測量組件渲染時間外，還可以測量常規JavaScript函數的執行。
要安裝放心，請在應用程序文件夾中運行以下命令：
使用紗線
yarn add --dev reassure使用NPM
npm install --save-dev reassure您還需要一個工作的嘲笑設置以及一個反應本機測試庫或React Testing庫之一。
請參閱安裝指南。
您可以檢查我們的示例項目：
放心將嘗試檢測您已安裝的測試庫。如果兩個對本機測試庫和React測試庫都存在，它將警告您，並給予React Native Testing庫的優先級。您可以使用configure選項明確指定測試庫：
configure ( { testingLibrary : 'react-native' } ) ;
// or
configure ( { testingLibrary : 'react' } ) ;您應該在開玩笑的設置文件中將其設置，並且可以在需要時將其覆蓋。
現在安裝了庫，您可以在.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的
--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庫的版本低於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 });
} ) ;如果您的測試包含任何異步更改，則需要確保方案等待這些更改的沉降，例如使用RNTL的findBy查詢， waitFor或waitForElementToBeRemoved功能。
要測量您的第一個測試性能，您需要在終端中運行以下命令：
yarn reassure此命令將使用JEST多次運行您的測試，收集性能統計信息，並將其寫入.reassure/current.perf文件。要檢查您的設置，請檢查第一次運行命令後輸出文件是否存在。
注意：您可以在
.gitignore文件中添加.reassure/文件夾，以避免意外地提交結果。
放心的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 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/ 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以運行性能測試腳本並輸出結果。為了顯示輸出，我們將與Danger JS集成，該危險支持所有主要的CI工具。
您將需要一個工作危險的JS設置。
然後在您的Dangerfile中添加放心的危險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在性能測量過程中以微秒精度來測量反應分量。這意味著相同的代碼會根據機器而更快或較慢。因此，基線和當前的測量需要在同一台計算機上運行。最好的是，它們應該接一個地運行。
此外，您的CI代理需要具有穩定的性能才能取得有意義的結果。只要您的經紀人的性能一致，您的代理商是快速還是緩慢都沒有關係。這就是為什麼在性能測試期間不應使用任何其他可能影響測量渲染時間的工作的代理的原因。
為了幫助您評估機器的穩定性，可以使用reassure check-stability命令。它針對當前代碼運行兩次性能測量，因此基線和當前測量值是指同一代碼。在這種情況下，預期的變化為0％（無變化）。隨機性能變化的程度將反映您的機器的穩定性。該命令可以在CI和本地機器上同時運行。
通常，隨機更改應低於5％。 10％或更多的結果被認為太高，這意味著您應該在調整機器的穩定性方面工作。
注意：作為最後的度假勝地的竅門，您可以將
run選項從所有或某些測試的默認值從10到20、50甚至100的默認值增加，這是基於這樣的假設，即更多的測試運行將使測量的波動均勻。但是，這將使您的測試進行更長的時間。
您可以參考我們的示例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 ：React組件，例如Provider ， ui將與之包裝。注意： wrapper本身的渲染持續時間被排除在結果之外；僅測量包裝組件。scenario ：一種自定義異步函數，該函數通過使用RNTL或RTL功能來定義UI中的用戶交互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 ：文件的名稱記錄將保存到verbose ：使保證日誌更多，例如用於調試目的testingLibrary ：在哪裡查找render和cleanup功能，支持的值'react-native' ， 'react'或對象提供自定義render和cleanup功能configure功能 function configure ( customConfig : Partial < Config > ) : void ; configure函數可以覆蓋默認配置參數。
resetToDefaults函數 resetToDefaults ( ) : void將當前配置重置為原始defaultConfig對象
您可以使用可用的環境變量來更改測試跑步者設置。
TEST_RUNNER_PATH ：測試跑步者的替代路徑。默認為'node_modules/.bin/jest'或'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請參閱了解如何為存儲庫和開發工作流程貢獻的貢獻指南。
麻省理工學院
放心是一個開源項目，將始終保持免費使用。該項目是與Intain密切合作開發的，最初是其內部項目。由於他們願意開發React＆React Antial生態系統，我們決定將其製定為開源。如果您認為它很酷，請出演嗎？
Callstack是一組反應，並反應本地專家。如果您需要這些幫助或想打個招呼，請通過[email protected]與我們聯繫！
喜歡這個項目？ ⚛️加入Callstack團隊，他們為客戶做驚人的事情，並驅動器反應本機開源！
