Integration assessments on React Native with Cavy
In a cellular app, a function might include a number of modules that should talk with one another. Unit testing checks that the person modules work as meant. Finish-to-end (E2E) testing makes certain that the function helps anticipated consumer habits. Integration testing, nevertheless, falls someplace in between — it assessments the contracts between the modules of a function and checks that the modules work together as deliberate.
An instance use case for integration testing is verifying how an inside module, comparable to a JavaScript operate for making in-app purchases in a React Native app, interacts with native software program like Apple StoreKit or the Google Play Billing Library. Integration testing is particularly necessary for React Native and different cross-platform cellular apps as a result of one piece of code should efficiently talk with two totally different working programs: Android and iOS.
On this tutorial, you’ll discover ways to use the Cavy take a look at framework to construct and run integration assessments in React Native apps.
- Create a take a look at helper element that may permit you to use Cavy for integration testing with out interacting with the app’s UI
- Write and run a Cavy integration take a look at
In our React Native app, we would have liked to check a file corruption repair. Android 10 has a identified bug wherein writing knowledge to an current file might corrupt that file below sure circumstances. To repair this problem, we constructed an atomic file writing package deal for React Native: react-native-atomic-file-ops.
We needed to check this package deal in our app. Testing cellular OS operations requires native code to run on a tool / emulator / simulator. Jest and different JavaScript testing frameworks couldn’t present the protection we would have liked as a result of the bug affected how our app interacted with a specific Android model. We wanted to check that knowledge written to a file on Android 10 from a React Native app could possibly be rewritten with out corrupting the file. This communication appears like:
Why Cavy?
To check this communication in Jest requires mock capabilities. Whereas Jest is beneficial for unit testing React Native parts and JavaScript strategies, it can not entry the cellular OS. Any interactions with the OS should be mocked. We needed to run our Android code on a tool and take a look at the actual — not mocked — habits of our package deal.
React Native E2E take a look at frameworks, like Cavy and Detox, offered a place to begin for us to find out the best way to run integration assessments. These frameworks assist testing on emulators and gadgets. Nevertheless, testing the contracts from the React Native module to native file programs in our app didn’t require UI interplay. We didn’t need to tie the file writing module and its assessments to an actual UI in our app.
Cavy’s structure helps this want. The Cavy tester imports your app and embeds it in Cavy’s <Tester /> element. This sample is customizable, permitting you to import, embed, and take a look at any React Native element. As a substitute of importing your complete app for E2E testing, you’ll be able to import a single element to check. As you will note while you begin engaged on the instance app, that element doesn’t must be a part of your app’s UI.
See the instance tester in Cavy’s documentation: “Establishing the Cavy Tester”.
Prepared to jot down your first integration take a look at with Cavy? Let’s get began!
You’ll construct an app to check {that a} React Native module integrates with Android and iOS. On this instance, you’ll take a look at how react-native-atomic-file-ops communicates with native file programs.
Getting Began
Comply with React Native’s directions for establishing your most popular improvement atmosphere. Use the React Native CLI (not Expo) to ensure the app can entry the cellular OS.
As soon as your atmosphere is ready up, initialize your React Native app:
npx react-native init cavyExampleApp
This integration take a look at won’t be interacting with the UI. For those who’d wish to see a cute guinea pig while you boot your app, please be at liberty to make use of the instance App.js code and picture for the touchdown display screen. In any other case, you’ll be able to hold the default React Native display screen and even simplify it all the way down to show “Hey, world!”
Set up the next packages:
yarn add react-native-atomic-file-opsyarn add react-native-fs
react-native-fs gives learn entry to the Android and iOS file programs. You’ll use its API in your instance take a look at.
In case you are constructing an iOS app, additionally set up the packages with CocoaPods:
cd iospod set up
Add Cavy to your app. Set up the Cavy CLI in your native machine to rapidly spin up the required scaffolding in your venture and simply run assessments.
yarn add cavy --devyarn international add cavy-cli
As soon as Cavy is put in in your venture, initialize the Cavy tester:
cavy init
Your venture ought to now include an index.take a look at.js file and a specs folder within the root listing. specs is the place you’ll construct your assessments. It ought to include an exampleSpec.js file.
Rename exampleSpec.js to atomicFileWritingSpec.js.
Create the Check Helper Part
Within the specs listing, create a brand new file named fileWritingTestHelper.js. This file will retailer the testable React Native element that Cavy will seek advice from when operating assessments.
Enter the next code:
fileWritingTestHelper.js creates a testable React Native element you can reference in your integration assessments with no need to wrap or assign refs to UI parts.
To complete establishing the Cavy tester, open and configure index.take a look at.js.
Write the Integration Check
Let’s write the combination take a look at! You’ll work in atomicFileWritingSpec.js.
Import the next modules:
// The module you might be testing
import AtomicFileOps from 'react-native-atomic-file-ops';// Offers learn entry to the Android and iOS file programs
import RNFS from 'react-native-fs';
Create the next variables:
// You'll write your knowledge to fileName
const fileName = 'AtomicFileOpsCavy.take a look at';// filePath gives absolutely the path to the file
const filePath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
Earlier than operating your take a look at, you must have some checks in place:
Now you’ll write your take a look at case. You’ll take a look at that while you overwrite current knowledge on a file with new knowledge, the file accommodates solely the brand new, uncorrupted knowledge.
The Cavy integration take a look at will make it possible for the contracts between the React Native and native modules work as anticipated.
After the beforeEach operate and nonetheless inside export default operate(spec) { }, add the take a look at:
You possibly can view atomicFileWritingSpec.js in its entirety on GitHub.
You at the moment are able to run your take a look at.
Run the Check
Run the take a look at from the command line:
// Android
cavy run-android// iOS
cavy run-ios
Congratulations! You’ve got efficiently examined the combination of a React Native module with native modules.
In case your take a look at isn’t passing, it’s useful to set a breakpoint or use the debugger assertion throughout the take a look at to pause Cavy and examine the take a look at output.
Ensuring your React Native modules work as anticipated throughout a number of platforms is integral to constructing an important app. Together with unit and E2E testing, integration testing needs to be an important a part of your React Native testing technique.
Cavy gives an easy-to-use, customizable framework that helps integration testing on React Native. With the take a look at helper element sample, you’ll be able to create testable parts to make use of in your integration assessments with out having to work together along with your app’s UI.
In fact, you should use Cavy in your UI and E2E testing, too!
Thanks for studying, and blissful testing!
