reassure
v1.3.0
Teman Pengujian Kinerja untuk Bereaksi dan Bereaksi Asli.
Baca dokumen
reassure-tests.sh ).gitignorereassure-tests.sh )measureRendersMeasureRendersOptionsmeasureFunctionMeasureFunctionOptionsconfigure fungsiresetToDefaultsAnda ingin aplikasi React Native Anda berkinerja baik dan cepat setiap saat. Sebagai bagian dari tujuan ini, Anda membuat profil aplikasi, mengamati pola render, menerapkan memoisasi di tempat yang tepat, dll. Tapi itu semua manual dan terlalu mudah untuk secara tidak sengaja memperkenalkan regresi kinerja yang hanya akan tertangkap selama QA atau lebih buruk, oleh pengguna Anda .
Yakinlah Anda mengotomatisasi pengujian regresi kinerja aplikasi asli pada CI atau mesin lokal. Dengan cara yang sama, Anda menulis integrasi dan tes unit Anda yang secara otomatis memverifikasi bahwa aplikasi Anda masih berfungsi dengan benar , Anda dapat menulis tes kinerja yang memverifikasi bahwa aplikasi Anda masih berfungsi dengan performa .
Anda dapat memikirkannya sebagai perpustakaan pengujian kinerja bereaksi. Faktanya, meyakinkan dirancang untuk menggunakan kembali sebanyak mungkin tes perpustakaan pengujian asli Anda dan setup mungkin.
Yakinlah bekerja dengan mengukur karakteristik render - durasi dan hitungan - dari skenario pengujian yang Anda berikan dan membandingkannya dengan versi stabil. Ini mengulangi skenario beberapa kali untuk mengurangi dampak variasi acak dalam waktu render yang disebabkan oleh lingkungan runtime. Kemudian, itu berlaku analisis statistik untuk menentukan apakah perubahan kode signifikan secara statistik. Akibatnya, ini menghasilkan laporan yang dapat dibaca manusia yang merangkum hasil dan menampilkannya pada CI atau sebagai komentar untuk permintaan tarik Anda.
Selain mengukur waktu render komponen, ini juga dapat mengukur eksekusi fungsi JavaScript reguler.
Untuk menginstal meyakinkan, jalankan perintah berikut di folder aplikasi Anda:
Menggunakan benang
yarn add --dev reassureMenggunakan NPM
npm install --save-dev reassureAnda juga akan memerlukan pengaturan lelucon yang berfungsi serta salah satu perpustakaan pengujian asli React atau React Testing Library.
Lihat Panduan Instalasi.
Anda dapat memeriksa contoh proyek kami:
Yakinlah akan mencoba mendeteksi pustaka pengujian mana yang telah Anda instal. Jika keduanya bereaksi perpustakaan pengujian asli dan reaksi perpustakaan pengujian hadir, itu akan memperingatkan Anda tentang itu dan memberikan prioritas untuk bereaksi perpustakaan pengujian asli. Anda dapat secara eksplisit menentukan pustaka pengujian untuk digunakan dengan menggunakan opsi configure :
configure ( { testingLibrary : 'react-native' } ) ;
// or
configure ( { testingLibrary : 'react' } ) ;Anda harus mengaturnya di file pengaturan JEST Anda, dan Anda dapat menimpanya dalam file uji tertentu jika diperlukan.
Sekarang perpustakaan diinstal, Anda dapat menulis skenario pengujian pertama Anda dalam file dengan .perf-test.js / .perf-test.tsx ekstensi:
// ComponentUnderTest.perf-test.tsx
import { measureRenders } from 'reassure' ;
import { ComponentUnderTest } from './ComponentUnderTest' ;
test ( 'Simple test' , async ( ) => {
await measureRenders ( < ComponentUnderTest / >);
} ) ; Tes ini akan mengukur waktu render ComponentUnderTest selama pemasangan dan efek sinkronisasi yang dihasilkan.
Catatan : Yakinlah secara otomatis akan mencocokkan nama file uji menggunakan opsi
--testMatchJest dengan nilai"**/__perf__/**/*.[jt]s?(x)", "**/*.(perf|perf-test).[jt]s?(x)". Namun, jika Anda ingin lulus opsi--testMatchatau--testRegex, Anda dapat menambahkannya ke skripreassure measureuntuk melewati glob Anda sendiri. Lainnya Tentang--testMatchdan--testRegexin Jest Docs
Jika komponen Anda berisi logika async atau Anda ingin menguji beberapa interaksi, Anda harus lulus opsi 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 });
} ) ; Tubuh fungsi scenario menggunakan metode perpustakaan pengujian asli React Native yang akrab.
Dalam hal menggunakan versi React Native Testing Library lebih rendah dari V10.1.0, di mana screen Helper tidak tersedia, fungsi scenario memberikannya sebagai argumen pertama:
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 });
} ) ; Jika tes Anda berisi perubahan async, Anda harus memastikan bahwa skenario menunggu perubahan ini untuk diselesaikan, misalnya menggunakan pertanyaan findBy , waitFor atau waitForElementToBeRemoved fungsi dari RNTL.
Untuk mengukur kinerja tes pertama Anda, Anda perlu menjalankan perintah berikut di terminal:
yarn reassure Perintah ini akan menjalankan tes Anda beberapa kali menggunakan Jest, mengumpulkan statistik kinerja dan akan menulisnya ke file .reassure/current.perf . Untuk memeriksa pengaturan Anda, periksa apakah ada file output setelah menjalankan perintah untuk pertama kalinya.
Catatan: Anda dapat menambahkan
.reassure/folder ke file.gitignoreAnda untuk menghindari secara tidak sengaja melakukan hasil Anda.
Yakinkan CLI secara otomatis akan mencoba mendeteksi nama cabang kode sumber Anda dan melakukan hash saat Anda menggunakan git. Anda dapat mengganti opsi ini, misalnya jika Anda menggunakan sistem kontrol versi yang berbeda:
yarn reassure --branch [branch name] --commit-hash [commit hash] Untuk mendeteksi perubahan kinerja, Anda harus mengukur kinerja dua versi arus kode Anda (kode yang dimodifikasi) dan baseline (titik referensi Anda, misalnya cabang main ). Untuk mengukur kinerja pada dua cabang, Anda harus mengganti cabang dalam git atau mengklon dua salinan repositori Anda.
Kami ingin mengotomatiskan tugas ini untuk menjalankan CI. Untuk melakukan itu, Anda perlu membuat skrip pengujian kinerja. Anda harus menyimpannya di repositori Anda, misalnya sebagai reassure-tests.sh .
Versi sederhana dari skrip tersebut, menggunakan pendekatan yang mengubah cabang, adalah sebagai berikut:
#! /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 reassureUntuk membuat pengaturan integrasi CI dan semua prasyarat lebih nyaman, kami telah menyiapkan perintah CLI untuk menghasilkan semua templat yang diperlukan untuk Anda mulai.
Cukup jalankan:
yarn reassure initIni akan menghasilkan struktur file berikut
├── <ROOT>
│ ├── reassure-tests.sh
│ ├── dangerfile.ts/js (or dangerfile.reassure.ts/js if dangerfile.ts/js already present)
│ └── .gitignore
reassure-tests.sh )Skrip Dasar memungkinkan Anda untuk menjalankan jaminan pada CI. Lebih lanjut tentang pentingnya dan struktur file ini di bagian berikut.
Jika proyek Anda sudah berisi dangerfile.ts/js , CLI tidak akan mengesampingkannya dengan cara apa pun. Sebaliknya, itu akan menghasilkan file dangerfile.reassure.ts/js , memungkinkan Anda untuk membandingkan dan memperbarui sendiri sesuai keinginan Anda.
.gitignore Jika file .gitignore hadir dan tidak menyebutkan penampilan reassure , skrip akan menambahkan .reassure/ direktori sampai akhir.
reassure-tests.sh ) Untuk mendeteksi perubahan kinerja, Anda harus mengukur kinerja dua versi arus kode Anda (kode yang dimodifikasi) dan baseline (titik referensi Anda, misalnya cabang main ). Untuk mengukur kinerja pada dua cabang, Anda harus mengganti cabang dalam git atau mengklon dua salinan repositori Anda.
Kami ingin mengotomatiskan tugas ini untuk menjalankan CI. Untuk melakukan itu, Anda perlu membuat skrip pengujian kinerja. Anda harus menyimpannya di repositori Anda, misalnya sebagai reassure-tests.sh .
Versi sederhana dari skrip tersebut, menggunakan pendekatan yang mengubah cabang, adalah sebagai berikut:
#! /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 reassureSebagai langkah pengaturan akhir, Anda harus mengkonfigurasi CI Anda untuk menjalankan skrip pengujian kinerja dan menghasilkan hasilnya. Untuk menghadirkan output saat ini, kami berintegrasi dengan bahaya JS, yang mendukung semua alat CI utama.
Anda akan membutuhkan pengaturan JS Bahaya Kerja.
Kemudian tambahkan Plugin JS Danger JS ke Dangerfile Anda:
// /<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' ) ,
} ) ; Jika Anda belum memiliki DangerFile ( dangerfile.js atau dangerfile.ts ), Anda dapat menggunakan yang dihasilkan oleh skrip reassure init tanpa membuat perubahan tambahan.
Itu juga dalam contoh file kami Dangerfile.
Akhirnya, jalankan skrip pengujian kinerja & bahaya di konfigurasi CI Anda:
- name : Run performance testing script
run : ./reassure-tests.sh
- name : Run Danger.js
run : yarn danger ci
env :
GITHUB_TOKEN : ${{ secrets.GITHUB_TOKEN }}Anda juga dapat memeriksa contoh alur kerja GitHub kami.
Contoh di atas didasarkan pada tindakan GitHub, tetapi harus mirip dengan file konfigurasi CI lainnya dan hanya boleh berfungsi sebagai referensi dalam kasus tersebut.
Catatan : Tes kinerja Anda akan berjalan lebih lama daripada tes integrasi reguler. Itu karena kami menjalankan setiap skenario pengujian beberapa kali (secara default, 10) dan ulangi untuk dua cabang kode Anda. Oleh karena itu, setiap tes akan berjalan 20 kali secara default. Itu kecuali Anda meningkatkan jumlah itu lebih tinggi.
Kami mengukur waktu render komponen reaksi dengan presisi mikrodetik selama pengukuran kinerja menggunakan React.Profiler . Ini berarti kode yang sama akan berjalan lebih cepat atau lebih lambat, tergantung pada mesin. Untuk alasan ini, pengukuran awal & saat ini perlu dijalankan pada mesin yang sama. Secara optimal, mereka harus dijalankan satu demi satu.
Selain itu, agen CI Anda perlu memiliki kinerja yang stabil untuk mencapai hasil yang bermakna. Tidak masalah jika agen Anda cepat atau lambat asalkan konsisten dalam kinerjanya. Itu sebabnya agen tidak boleh digunakan selama tes kinerja untuk pekerjaan lain yang mungkin berdampak pada pengukuran waktu render.
Untuk membantu Anda menilai stabilitas mesin Anda, Anda dapat menggunakan perintah reassure check-stability . Ini menjalankan pengukuran kinerja dua kali untuk kode saat ini, sehingga pengukuran baseline dan saat ini mengacu pada kode yang sama. Dalam kasus seperti itu, perubahan yang diharapkan adalah 0% (tidak ada perubahan). Tingkat perubahan kinerja acak akan mencerminkan stabilitas mesin Anda. Perintah ini dapat dijalankan baik pada CI dan mesin lokal.
Biasanya, perubahan acak harus di bawah 5%. Hasil 10% dan lebih banyak dianggap terlalu tinggi, artinya Anda harus bekerja untuk mengubah stabilitas mesin Anda.
Catatan : Sebagai trik dari upaya terakhir, Anda dapat meningkatkan opsi
rundari nilai default 10 hingga 20, 50 atau bahkan 100 untuk semua atau beberapa tes Anda, berdasarkan asumsi bahwa lebih banyak tes berjalan bahkan akan keluar fluktuasi pengukuran. Namun, itu akan membuat tes Anda berjalan lebih lama.
Anda dapat merujuk pada contoh alur kerja GitHub kami.
Melihat contohnya, Anda dapat melihat bahwa skenario pengujian dapat ditugaskan ke kategori tertentu:
measureRenders Pembungkus khusus untuk fungsi render RNTL yang bertanggung jawab untuk merender layar yang dilewati di dalam komponen React.Profiler , mengukur kinerja dan hasil penulisan ke file output. Anda dapat menggunakan objek options opsional yang memungkinkan aspek penyesuaian pengujian
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 : Jumlah berjalan per seri untuk tes tertentuwarmupRuns : Jumlah pemanasan tambahan yang akan dilakukan dan dibuang sebelum berjalan yang sebenarnya (default 1).wrapper : Komponen Bereaksi, seperti Provider , yang akan dibungkus dengan ui . Catatan: Durasi render dari wrapper itu sendiri dikecualikan dari hasil; Hanya komponen yang dibungkus yang diukur.scenario : Fungsi Async Kustom, yang mendefinisikan interaksi pengguna dalam UI dengan menggunakan fungsi RNTL atau RTLwriteFile : (Default true ) harus menulis output ke file. measureFunction Memungkinkan Anda untuk membungkus fungsi sinkron apa pun, mengukur waktu eksekusi dan menulis hasil ke file output. Anda dapat menggunakan options opsional untuk menyesuaikan aspek pengujian. Catatan: Hitungan eksekusi akan selalu menjadi satu.
async function measureFunction (
fn : ( ) => void ,
options ?: MeasureFunctionOptions
) : Promise < MeasureResults > { MeasureFunctionOptions interface MeasureFunctionOptions {
runs ?: number ;
warmupRuns ?: number ;
}runs : Jumlah berjalan per seri untuk tes tertentuwarmupRuns : Jumlah pemanasan tambahan yang akan dilakukan dan dibuang sebelum berjalan yang sebenarnya. Konfigurasi default yang akan digunakan oleh skrip pengukuran. Objek konfigurasi ini dapat ditimpa dengan penggunaan fungsi 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 : Jumlah berjalan berulang dalam seri per uji (memungkinkan untuk akurasi yang lebih tinggi dengan menggabungkan lebih banyak data). Harus ditangani dengan hati -hati.
warmupRuns : Jumlah pemanasan tambahan yang akan dilakukan dan dibuang sebelum berjalan yang sebenarnya. outputFile : Nama file catatan akan disimpan untuk verbose : membuat log meyakinkan lebih banyak, misalnya untuk tujuan debugging testingLibrary : di mana mencari fungsi render dan cleanup , nilai yang didukung 'react-native' , 'react' atau objek yang menyediakan adat adat Fungsi render dan cleanup configure fungsi function configure ( customConfig : Partial < Config > ) : void ; Fungsi configure dapat mengganti parameter konfigurasi default.
resetToDefaults resetToDefaults ( ) : void Setel ulang konfigurasi saat ini ke objek defaultConfig asli
Anda dapat menggunakan variabel lingkungan yang tersedia untuk mengubah pengaturan Test Runner Anda.
TEST_RUNNER_PATH : jalur alternatif untuk pelari pengujian Anda. Default ke 'node_modules/.bin/jest' atau di windows 'node_modules/jest/bin/jest'TEST_RUNNER_ARGS : Satu set argumen yang diumpankan ke pelari. Default ke '--runInBand --testMatch "**/__perf__/**/*.[jt]s?(x)", "**/*.(perf|perf-test).[jt]s?(x)"'Contoh:
TEST_RUNNER_PATH=myOwnPath/jest/bin yarn reassureLihat Panduan Kontribusi untuk mempelajari cara berkontribusi pada repositori dan alur kerja pengembangan.
Mit
Yakinlah adalah proyek open source dan akan selalu tetap bebas digunakan. Proyek ini telah dikembangkan dalam kemitraan erat dengan Entain dan awalnya proyek in-house mereka. Berkat kesediaan mereka untuk mengembangkan Ekosistem Native React & React, kami memutuskan untuk menjadikannya open source. Jika Anda pikir itu keren, tolong bintangi?
CallStack adalah kelompok yang bereaksi dan bereaksi ahli asli. Jika Anda memerlukan bantuan dengan ini atau ingin menyapa, hubungi kami di [email protected]!
Suka proyeknya? ⚛️ Bergabunglah dengan tim CallStack yang melakukan hal -hal luar biasa untuk klien dan drive React Native Open Source!
