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团队，他们为客户做惊人的事情，并驱动器反应本机开源！
