React native screenshot testing library
source link: https://www.tuicool.com/articles/hit/3AFRbiu
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
pixels-catcher
Library for testing React Native UI components and screens
Getting started
Install and link
$ npm install pixels-catcher --save
The library depend on react-native-save-view
which is used to convert View
to base64 data and has native implementation.
Therefore the linking is required and this can be easily done with the following
step:
$ react-native link react-native-save-view
If for some reasons it doesn't work, check official react native documentation .
Create test
Create new entry file, for example, indexSnapshot
, and import registerSnapshot
, runSnapshots
and Snapshot
from pixels-catcher
:
import { registerSnapshot, runSnapshots, Snapshot, } from 'pixels-catcher';
After that create the snapshot component, which should extend Snapshot
and
implement static snapshotName
and renderContent
method. Be sure that your
component can accept collapsable
property, otherwise React can make an
optimization and drop the view. The implementation can be:
class AppSnapshot extends Snapshot { static snapshotName = 'AppSnapshot'; renderContent() { return (<App />); } }
after that register AppSnapshot
component:
registerSnapshot(AppSnapshot);
and trigger runSnapshots
which will register the application component and
run all snapshots:
runSnapshots(PUT_YOUR_APP_NAME_HERE);
Snapshots testing will be started as soon as the application is started.
Configuration
There are two options to define config:
-
Using
pixels-catcher.json
file in the root of the project -
Using
package.json
file with new propertyPixelsCatcher
And both of these two options should describe the configuration according to the following format:
PixelsCatcher: { PLATFORM: { ...SHARED_CONFIGURATION, CONFIGURATION: { ...CONFIGURATION_SPECIFIC } } }
where
-
PLATFORM
can beandroid
orios
-
CONFIGURATION
is a configuration with the following properties:activityName appFile deviceName deviceParams packageName snapshotsPath
-
SHARED_CONFIGURATION
. In case more that one configurations exists, shared parameters can be moved here.
Example for package.json
configuration (or check demo
project):
"PixelsCatcher": { "android": { "activityName": "MainActivity", "deviceName": "Nexus_5X", "packageName": "com.rumax.pixelscatcher.testapp", "snapshotsPath": "./snapshotsImages", "debug": { "deviceParams": ["-no-audio", "-no-snapshot"], "appFile": "./android/app/build/outputs/apk/debug/app-debug.apk" }, "release": { "deviceParams": ["-no-audio", "-no-snapshot", "-no-window"], "appFile": "./android/app/build/outputs/apk/debug/app-debug.apk" } }, "ios": { "deviceName": "iPhone 8 Plus", "packageName": "org.reactjs.native.example.testApp", "snapshotsPath": "./snapshotsImagesIOS", "dev": {}, "debug": { "appFile": "./ios/build/Build/Products/Debug-iphonesimulator/testApp.app" } } }
Run android
There are two options to run UI snapshots:
-
Using the generated
apk
file, provided via theappFile
. In this case pixels-catcher will open android emulator, installapk
file, execute all the tests and will provide a report at the end. This scenario can be used to integrate the screenshot testing with CI. -
In cases
appFile
is not defined, the development mode will be used. This means that only the server will be started and the application should be started manually. This scenario can be used to debug snapshots, create new reference images, etc.
To run tests execute the following command:
$ ./node_modules/.bin/pixels-catcher android debug
Generating APK file
By default the index.android.js
file is used which refer to your application.
To fix it, in android/app/build.gradle
add the following config:
project.ext.react = [ entryFile: System.getProperty("entryFile") ?: "index.js", bundleInDebug: System.getProperty("bundleInDebug") ? System.getProperty("bundleInDebug").toBoolean() : false ]
And generate the apk
:
cd android && ./gradlew assembleDebug -DentryFile="indexSnapshot.js"
Run iOS
Same as android there are two options to run UI snapshots:
-
Using the generated app, provided via the
appFile
. In this case pixels-catcher will open iOS simulator, installapp
, execute all the tests and will provide a report at the end. This scenario can be used to integrate the screenshot testing with CI. -
In cases
appFile
is not defined, the development mode will be used. This means that only the server will be started and the application should be started manually. This scenario can be used to debug snapshots, create new reference images, etc.
To run tests execute the following command:
$ ./node_modules/.bin/pixels-catcher ios debug
Generating iOS app
To make a valid app you will need to do the following actions:
FORCE_BUNDLING RCT_NO_LAUNCH_PACKAGER
You can also check the demo
project and check the required changes.
Demo
Check the demo which includes an example how the snapshots can be done and also has some useful scripts that can be used to integrate with CI.
License
Author
Other information
- If you think that something is missing or would like to propose new feature, please, discuss it with the author
- Please, :star:️ the project. This gives the confidence that you like it and a great job was done by publishing and supporting it
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK