@goibibo

1. Decoupling React Native Test Framework @Goibibo
Decoupling React Native
Test Framework
August 31st, 2019
React Native
ReactJS Bangalore
goibibo
@roydipti23
@goibibo_tech
Dipti Roy
Why is it important to us?
Know more:
@
https://medium.com/@roydipti23/decoupling-cavy-react-native-integration-testing-5e89efb06daa

2. !(CODE MUTATION)
!(PRODUCTION BUNDLE)
LOOSELY COUPLED
Decoupling React Native Test Framework @Goibibo
Ideal Scenario for integrating any Test Framework

3. Decoupling React Native Test Framework @Goibibo
Cavy
Cavy is a cross-platform integration test
framework for React Native, by Pixie Labs.

4. CHALLENGES
WITH CAVY
Decoupling React Native Test Framework @Goibibo
Modification in the entry file of React Native.
TEST WRAPPER
Hooks supported only for Class components.
SUPPORT ONLY FOR CLASS
Each component is to be hooked with cavy’s function.
TIGHT COUPLING

5. A wrapper over the hook
HOW WE ADOPTED
CAVY?
WHY ?
1. To use cavy only in test_env
2. To make it un-pluggable
Decoupling React Native Test Framework @Goibibo

6. Decoupling React Native Test Framework @Goibibo
Example

7. IF TEST_ENV CONVERT TO CLASS
ADD CAVY HOOK
SUPPORT FOR GENERATE-TEST-
HOOK CALLBACK FUNCTION
WHAT WILL THE
WRAPPER DO?
Decoupling React Native Test Framework @Goibibo

8. Wrapper
Decoupling React Native Test Framework @Goibibo

9. FILE.TEST.JS
Move the test files under
the extension files.test.js
and have a corresponding
files.js
METRO CONFIG
Metro config to exclude
bundling of
extension test.js
ENV TEST
Environment variable to
identify the build
bundling (TEST in our
case)
HOW NOT TO BUNDLE OUR
TEST CASES ?
Decoupling React Native Test Framework @Goibibo

10. Decoupling React Native Test Framework @Goibibo
DEMO

11. Decoupling React Native Test Framework @Goibibo
Cavy not running in
release build
Cavy doesn't support
native navigation
998 weekly downloads
DEPLOYMENT
CYCLE
NATIVE
NAVIGATION
ADOPTION
Further Challenges

12. Pixelast | Design and Tech
Deployment cycle
Native navigation
1.
2.
Easily be plugged in
and out
Read the source code
for custom
implementations.
Make sure it is not part
of release bundle.
CHECK THE
COMPATIBILTY
DE-COUPLE SOURCE CODE BUNDLE
Take away and Learnings

13. Q & A
DIPTI ROY
@roydipti23 @goibibo_tech
THANK YOU