### Initialize and Build Project Source: https://github.com/callstack/reassure/blob/main/CONTRIBUTING.md Commands to install project dependencies and build the workspace packages using Yarn. ```shell yarn yarn build ``` -------------------------------- ### Install Reassure v1.x Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/migration-v1.md Commands to install the Reassure package as a development dependency using either npm or yarn package managers. ```bash npm install --save-dev reassure ``` ```bash yarn add --dev reassure ``` -------------------------------- ### Automate Performance Testing in CI Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md A bash script example for CI environments that switches between the baseline branch and the current branch to measure and compare performance data. ```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 ``` -------------------------------- ### Install Reassure using Yarn or NPM Source: https://github.com/callstack/reassure/blob/main/README.md Commands to install Reassure as a development dependency using either yarn or npm package managers. Ensure you have Jest and a compatible testing library (React Native Testing Library or React Testing Library) set up. ```bash yarn add --dev reassure ``` ```bash npm install --save-dev reassure ``` -------------------------------- ### Configure Reassure Performance Testing Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/api.md Defines the global configuration structure and provides an example of how to override default settings using the configure function. ```typescript type Config = { runs?: number; warmupRuns?: number; outputFile?: string; verbose?: boolean; testingLibrary?: 'react-native' | 'react' | { render: (component: React.ReactElement) => any; cleanup: () => any }; }; const defaultConfig: Config = { runs: 10, warmupRuns: 1, outputFile: '.reassure/current.perf', verbose: false, testingLibrary: undefined, }; import { configure } from 'reassure'; configure({ testingLibrary: 'react', runs: 7, }); ``` -------------------------------- ### CI Integration Script for Reassure (Bash) Source: https://context7.com/callstack/reassure/llms.txt This bash script automates the process of gathering baseline and current performance measurements in a CI environment. It switches branches, installs dependencies, runs Reassure for baseline, and then runs it again for current measurements. ```bash #!/usr/bin/env bash # reassure-tests.sh set -e BASELINE_BRANCH=${GITHUB_BASE_REF:="main"} # Required for git switch on CI git fetch origin # Gather baseline performance measurements git switch "$BASELINE_BRANCH" yarn install yarn reassure --baseline # Gather current performance measurements and compare git switch --detach - yarn install yarn reassure ``` -------------------------------- ### Install Reassure using npm or yarn Source: https://context7.com/callstack/reassure/llms.txt Installs Reassure as a development dependency in your React or React Native project using either npm or yarn package managers. ```bash # Using npm npm install --save-dev reassure # Using yarn yarn add --dev reassure ``` -------------------------------- ### Configure Testing Library in Reassure Source: https://github.com/callstack/reassure/blob/main/README.md TypeScript code to explicitly configure which testing library Reassure should use. This is typically done in your Jest setup file and can be overridden in specific test files if needed. It helps Reassure prioritize between React Native Testing Library and React Testing Library if both are installed. ```typescript import { configure } from 'reassure'; configure({ testingLibrary: 'react-native' }); // or configure({ testingLibrary: 'react' }); ``` -------------------------------- ### GitHub Actions Workflow for Performance Tests (YAML) Source: https://context7.com/callstack/reassure/llms.txt This YAML configuration sets up a GitHub Actions workflow to automatically run Reassure performance tests on pull requests targeting the main branch. It includes steps for checking out code, setting up Node.js, installing dependencies, running the performance tests script, and posting results using Danger JS. ```yaml # .github/workflows/performance.yml name: Performance Tests on: pull_request: branches: [main] jobs: performance: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 # Required for git history - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'yarn' - name: Install dependencies run: yarn install --frozen-lockfile - name: Run performance tests run: ./reassure-tests.sh - name: Post results with Danger run: yarn danger ci env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} ``` -------------------------------- ### Reassure Performance Test with Older RNTL Scenario Source: https://github.com/callstack/reassure/blob/main/README.md Example demonstrating how to write an asynchronous performance test using Reassure with older versions of React Native Testing Library (prior to v10.1.0) where the `screen` helper is not globally available. The `scenario` function receives `screen` as its first argument. ```typescript 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(, { scenario }); }); ``` -------------------------------- ### Configure Reassure Testing Library Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Explicitly sets the Testing Library to be used by Reassure. This is useful when both React Native Testing Library and React Testing Library are installed, or to override automatic detection. ```ts configure({ testingLibrary: 'react-native' }); ``` ```ts configure({ testingLibrary: 'react' }); ``` -------------------------------- ### Write an Asynchronous Reassure Performance Test Source: https://github.com/callstack/reassure/blob/main/packages/reassure/README.md Example of an asynchronous performance test using Reassure's `measureRenders` with the `scenario` option. This is useful for testing components with async logic or interactions. The `scenario` function can receive the `screen` helper as an argument for older versions of React Native Testing Library. ```typescript 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(, { scenario }); }); ``` ```typescript 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(, { scenario }); }); ``` -------------------------------- ### Initialize Reassure CI Scaffolding Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Generates the necessary template files for CI integration, including a test script, dangerfile configuration, and gitignore updates. ```sh yarn reassure init ``` -------------------------------- ### Reassure CLI Commands Source: https://context7.com/callstack/reassure/llms.txt Reassure provides several command-line interface commands for initializing the project, running performance tests, setting baselines, checking stability, and customizing test execution with various flags. ```bash # Initialize Reassure in your project (creates CI script, dangerfile, updates .gitignore) yarn reassure init # Run performance tests and save results to .reassure/current.perf yarn reassure # Run performance tests and save as baseline yarn reassure --baseline # Specify custom branch and commit info yarn reassure --branch feature/optimization --commit-hash abc123 # Check CI machine stability (runs twice on same code) yarn reassure check-stability # Custom test file patterns yarn reassure --testMatch "**/*.perf.tsx" # Verbose output for debugging yarn reassure --verbose # Silent mode (errors only) yarn reassure --silent # Custom test runner path TEST_RUNNER_PATH=./node_modules/.bin/jest yarn reassure ``` -------------------------------- ### Run Performance Tests Source: https://github.com/callstack/reassure/blob/main/CONTRIBUTING.md Navigate to the native test application directory and execute the Reassure performance testing suite. ```shell cd test-apps/native yarn reassure ``` -------------------------------- ### Write a Basic Reassure Performance Test Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Demonstrates how to write a simple performance test using Reassure's `measureRenders` function to measure component render times. ```ts // ComponentUnderTest.perf-test.tsx import { measureRenders } from 'reassure'; test('Simple test', async () => { await measureRenders(); }); ``` -------------------------------- ### Publishing Packages Source: https://github.com/callstack/reassure/blob/main/CONTRIBUTING.md Command to publish new versions of the library to npm using Changesets. ```shell yarn publish ``` -------------------------------- ### Set Environment Variables for Reassure CLI Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/api.md Demonstrates how to execute the Reassure CLI with custom environment variables to override the test runner path. ```bash TEST_RUNNER_PATH=myOwnPath/jest/bin yarn reassure ``` -------------------------------- ### Configure Reassure Global Settings (TypeScript) Source: https://context7.com/callstack/reassure/llms.txt The `configure` function customizes Reassure's global behavior, such as specifying the testing library, number of runs, output file, and custom render/cleanup functions. `resetToDefaults` can be used to revert to default settings. ```typescript import { configure, resetToDefaults } from 'reassure'; // Configure for React Native Testing Library configure({ testingLibrary: 'react-native', runs: 10, warmupRuns: 1, outputFile: '.reassure/current.perf', }); // Configure for React Testing Library (web) configure({ testingLibrary: 'react', runs: 15, }); // Custom render and cleanup functions configure({ testingLibrary: { render: (component) => customRender(component), cleanup: () => customCleanup() } }); // Reset to default configuration resetToDefaults(); ``` -------------------------------- ### Integrate Reassure & Danger.js in GitHub Actions CI Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md This snippet shows how to add steps to your CI configuration file to run the Reassure performance testing script and Danger.js. It assumes a GitHub Actions environment and requires a GITHUB_TOKEN secret. ```yaml - name: Run performance testing script run: ./reassure-tests.sh - name: Run Danger.js run: yarn danger ci env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} ``` -------------------------------- ### Measure Test Performance with Reassure CLI Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Commands to execute performance tests and generate measurement files. The basic command runs tests and saves results, while the extended command allows manual specification of branch and commit hash. ```sh yarn reassure yarn reassure --branch [branch name] --commit-hash [commit hash] ``` -------------------------------- ### Configuration API Source: https://github.com/callstack/reassure/blob/main/packages/reassure/README.md Provides functions to configure and reset Reassure's default settings. ```APIDOC ## Configuration ### Default Configuration The default config which will be used by the measuring script. This configuration object can be overridden with the use of the `configure` function. ```ts type Config = { runs?: number; warmupRuns?: number; outputFile?: string; verbose?: boolean; testingLibrary?: | 'react-native' | 'react' | { render: (component: React.ReactElement) => 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`** (number) - The number of repeated runs in a series per test (allows for higher accuracy by aggregating more data). Should be handled with care. - **`warmupRuns`** (number) - The number of additional warmup runs that will be done and discarded before the actual runs. - **`outputFile`** (string) - The name of the file the records will be saved to. - **`verbose`** (boolean) - Make Reassure log more, e.g. for debugging purposes. - **`testingLibrary`** ('react-native' | 'react' | object) - Where to look for `render` and `cleanup` functions, supported values `'react-native'`, `'react'` or object providing custom `render` and `cleanup` functions. ### `configure` Function ```ts function configure(customConfig: Partial): void; ``` The `configure` function can override the default config parameters. ### `resetToDefaults` Function ```ts resetToDefaults(): void ``` Reset the current config to the original `defaultConfig` object. ``` -------------------------------- ### Write an Asynchronous Reassure Performance Test Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Shows how to write performance tests for components with asynchronous logic or interactions using the `scenario` option in `measureRenders`. ```ts import { measureRenders } from 'reassure'; import { screen, fireEvent } from '@testing-library/react-native'; test('Test with scenario', async () => { const scenario = async () => { fireEvent.press(screen.getByText('Go')); await screen.findByText('Done'); }; await measureRenders(, { scenario }); }); ``` ```ts 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(, { scenario }); }); ``` -------------------------------- ### Code Quality and Testing Source: https://github.com/callstack/reassure/blob/main/CONTRIBUTING.md Commands to verify code integrity through TypeScript type checking, ESLint linting, and Jest unit testing. ```shell yarn typecheck yarn lint yarn lint --fix yarn test ``` -------------------------------- ### Check CI Stability with Reassure Source: https://github.com/callstack/reassure/blob/main/README.md The `reassure check-stability` command runs performance measurements twice on the current code to assess the stability of the CI machine. It helps identify if random performance changes are within acceptable limits (typically below 5%). ```bash reassure check-stability ``` -------------------------------- ### measureFunction Source: https://github.com/callstack/reassure/blob/main/packages/reassure/README.md Wraps a synchronous function to measure its execution time and write the results to an output file. ```APIDOC ## measureFunction ### Description Allows you to wrap any synchronous function, measure its execution times and write results to the output file. The execution count is always one. ### Method Async Function ### Parameters #### Arguments - **fn** (() => void) - Required - The synchronous function to measure. - **options** (MeasureFunctionOptions) - Optional - Configuration for the measurement process. ### Request Example ```ts await measureFunction(() => myHeavyCalculation(), { runs: 50 }); ``` ### Response #### Success Response - **MeasureResults** (Promise) - The performance metrics collected during the execution. ``` -------------------------------- ### Default Reassure Configuration in TypeScript Source: https://github.com/callstack/reassure/blob/main/README.md Provides the default configuration object used by the Reassure measuring script. This can be overridden using the `configure` function. ```typescript const defaultConfig: Config = { runs: 10, warmupRuns: 1, outputFile: '.reassure/current.perf', verbose: false, testingLibrary: undefined, // Will try auto-detect first RNTL, then RTL }; ``` -------------------------------- ### Configure Reassure Settings in TypeScript Source: https://github.com/callstack/reassure/blob/main/README.md A function to override the default configuration parameters of Reassure with custom settings. ```typescript function configure(customConfig: Partial): void; ``` -------------------------------- ### Configure Danger JS for Reassure Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/installation.md Integrates Reassure results into Danger JS to report performance changes in pull requests. This snippet shows how to import and configure the plugin in a dangerfile. ```typescript import path from 'path'; import { dangerReassure } from 'reassure'; dangerReassure({ inputFilePath: path.join(__dirname, '.reassure/output.md'), }); ``` -------------------------------- ### Define Configuration Type for Reassure in TypeScript Source: https://github.com/callstack/reassure/blob/main/README.md Defines the configuration object type for Reassure, including parameters for runs, warmup runs, output file, verbosity, and testing library integration. ```typescript type Config = { runs?: number; warmupRuns?: number; outputFile?: string; verbose?: boolean; testingLibrary?: | 'react-native' | 'react' | { render: (component: React.ReactElement) => any; cleanup: () => any }; }; ``` -------------------------------- ### ESLint Configuration for Reassure Assertions Source: https://context7.com/callstack/reassure/llms.txt Configures ESLint to recognize Reassure's assertion functions like `measureRenders` as valid testing assertions. This helps maintain code quality and consistency within projects using Reassure. ```javascript // .eslintrc.js module.exports = { rules: { 'jest/expect-expect': [ 'error', { assertFunctionNames: ['expect', 'measureRenders', 'measureFunction', 'measureAsyncFunction'] } ] } }; ``` -------------------------------- ### Measure Renders with React.Profiler - Reassure Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/api.md Wraps React Native Testing Library's render function to measure component performance using React.Profiler. It measures rendering performance and writes results to an output file. Options allow customization of runs, outliers, wrappers, and scenarios. ```typescript async function measureRenders( ui: React.ReactElement, options?: MeasureRendersOptions, ): Promise { ``` ```typescript // sample.perf-test.tsx 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(, { scenario }); }); ``` -------------------------------- ### Integrate Reassure with Danger JS (TypeScript) Source: https://context7.com/callstack/reassure/llms.txt The `dangerReassure` function integrates Reassure's performance reports into Danger JS, allowing them to be posted as comments on pull requests. It requires specifying the input file path for the performance report and can be run in debug mode. ```typescript import path from 'path'; import { dangerReassure } from 'reassure'; // Basic usage with default output path dangerReassure({ inputFilePath: path.join(__dirname, '.reassure/output.md'), }); // With debug mode for local testing dangerReassure({ inputFilePath: '.reassure/output.md', debug: true // Logs to console instead of posting to PR }); ``` -------------------------------- ### measureRenders() Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/api.md Measures the performance of rendering a React component by wrapping it in a React.Profiler and executing optional user scenarios. ```APIDOC ## FUNCTION measureRenders() ### Description Custom wrapper for the RNTL/RTL's render function responsible for rendering the passed screen inside a React.Profiler component, measuring its performance and writing results to the output file. ### Parameters #### Arguments - **ui** (React.ReactElement) - Required - The component to render and measure. - **options** (MeasureRendersOptions) - Optional - Configuration object for runs, scenarios, and lifecycle hooks. ### Request Example ```ts await measureRenders(, { scenario: async () => { fireEvent.press(screen.getByText('Go')); } }); ``` ### Response #### Success Response (Promise) - **MeasureResults** (Object) - The performance metrics collected during the render cycles. ``` -------------------------------- ### measureFunction() Source: https://github.com/callstack/reassure/blob/main/docusaurus/docs/api.md Wraps and measures the execution time of a synchronous function. ```APIDOC ## FUNCTION measureFunction() ### Description Allows you to wrap any synchronous function, measure its performance and write results to the output file. ### Parameters #### Arguments - **fn** (Function) - Required - The synchronous function to measure. - **options** (MeasureFunctionOptions) - Optional - Configuration for runs, warmup, and outlier removal. ### Request Example ```ts await measureFunction(() => fib(30)); ``` ### Response #### Success Response (Promise) - **MeasureResults** (Object) - The performance metrics collected during execution. ``` -------------------------------- ### Measure Async Function Execution Time (TypeScript) Source: https://context7.com/callstack/reassure/llms.txt The `measureAsyncFunction` utility measures the execution time of asynchronous operations. It supports options for runs, warmup runs, and lifecycle hooks like `beforeEach` and `afterEach`. External dependencies should be mocked for consistent results. ```typescript import { measureAsyncFunction } from 'reassure'; import { fetchUserData, processImages, batchUpload } from './api'; // Basic async function measurement test('async data processing', async () => { // Mock external API to ensure consistent timing jest.spyOn(global, 'fetch').mockResolvedValue({ json: () => Promise.resolve({ data: 'test' }) } as Response); const results = await measureAsyncFunction(async () => { return await fetchUserData('user-123'); }); console.log('Mean async duration:', results.meanDuration, 'ms'); }); // Measuring Promise chains test('image processing pipeline', async () => { const mockImages = [{ id: 1, url: 'test.jpg' }]; await measureAsyncFunction(async () => { const processed = await processImages(mockImages); return processed; }, { runs: 10, warmupRuns: 2 }); }); // With setup and teardown test('batch upload performance', async () => { let testFiles: File[]; await measureAsyncFunction( async () => { await batchUpload(testFiles); }, { beforeEach: async () => { // Create test files before each run testFiles = createMockFiles(100); }, afterEach: async () => { // Cleanup uploaded files await cleanupUploads(); }, runs: 5 } ); }); ``` -------------------------------- ### Measure React Component Renders with measureRenders Source: https://context7.com/callstack/reassure/llms.txt The `measureRenders` function wraps the Testing Library `render` function to measure component rendering performance. It measures render duration and count, running scenarios multiple times for statistical accuracy. Supports custom wrappers, user interactions, and setup/teardown hooks. ```typescript // Button.perf-test.tsx import { measureRenders } from 'reassure'; import { screen, fireEvent, waitFor } from '@testing-library/react-native'; import { Button } from './Button'; // Basic render measurement test('Button renders efficiently', async () => { const results = await measureRenders(