I am fairly new to React Native, transitioning from iOS. I started experimenting with testing with Jest, and pretty soon discovered that I need to mock node modules, if not all dependencies. In my case it is AsyncStorage.
My question is not how to mock, for that I've found many guides, but rather why do I even need to mock to make the tests work? Please assume I am not interested in changing the behaviour of AsyncStorage, I'm simply wondering why the mock is needed to make the test run without errors.
A broader question: what is the build process that happens when I test an app?
Related
I'm trying to get errors from my React Native app, just now the app it's in production so I need a free way to get the users errors to fix it and know what happened. I am using React Native with Expo.
Abstract / Answer
Generally speaking, Expo offers great error detection for debugging purposes when running it in local development mode. But since you weren't specific, I'm going to assume you meant production not development. Your best bet would be using Sentry. If you would have asked me before then I would have suggested building your own module based on native events and report back using Firebase or something similar. But since Sentry is now well integrated into Expo, then your best bet is using it. It's a great platform with many features, it's definitely worth it.
For multiple reasons, I prefer to not use Jest. Also, I'm writing React Native with ClojureScript, so the data structures, asserts, etc are all different - that's another reason to no use a JS test library. The problem is that Jest does some kind of "magical compiling" and lots of mocks to be able to run tests.
So the question: what exactly does Jest do? I tried to compile dependencies with Babel with multiple presets - didn't work (one of the errors was Invariant Violation: Native module cannon be null). I tried to use mocking libraries like dl-react-native-mock-render, and while it did work on simple examples, when I added more dependencies it stopped working with errors like a missing dependency like #babel/runtime/helpers/interopRequireDefault, etc...
What I am thinking about doing is somewhat make the same steps that Jest do before it runs the tests. Does someone knows, exactly, what it does? What are the mocks it adds, etc?
I'm trying to integrate the react library called react-canvas-draw with expo.
the error in question is:
Component Exception - View config getter callback for component 'canvas' must be a function (received 'undefined'). Make sure to start component names with a capital letter.
I think its a babel config fix. converting es2015 to es7 or something then to react native code. I have no idea.
So I stopped using react-expo because it's a pain in the ass to configure all the settings with (Babel, es6, jest, eslint, etc & metro configs). I Generally know what all those packages do in layman's terms but I do not know anything with setting them up together and what goes where.
Instead I'm using npx create-react-native-app It comes pre-configured for what I'm doing and it has some neat feature like hot-reloading so it's just as fast in development. It's not as helpful as expo with ease of use with ios and android setup and exports but I can manage the configurations on my own.
I have been experimenting mono repositories with javascript, using react and react-native applications. However, I have been having some problems using external dependencies on a simple react-native application.
While trying to integrate react-navigation following this guide here, I always end up with a lot of errors like:
ERROR Invariant Violation: No callback found with cbID 18929 and callID 9464 for module . Args: '[1131]'
It even gets in loop. This starts happening when I import react-native-gesture-handler at index.js. I have been trying to understand the problem for days and tried a lot of different stuffs, since nohoist of dependencies, clearing dependencies, reset react-native caches, watchman links and so on. However, I always end up in this error.
I have been experimenting with it on ios.
I am not sure it is a problem with the libraries I have mentioned here, because if I have a standalone react-native project, I can use the react-native-gesture-handler.
So, initially, I thought it was a problem with the mono repository structure I have, however, I have tried to use other libraries like: styled-components, react-native-router, react-native-restart, and react-native-contacts, and those libraries work well.
Has anyone passed for this problem? I have a github repository here where I try to explain how to reproduce the error.
I have also been documenting, to my self, my experimentations with mono repositories here, step by step, in case it gives more context.
I do not know if it is the best place to make this question, however I do not know where to look more, any suggestion is welcomed.
Thanks!
I created a project with create-react-native-app and I want to use jest-enzyme matchers, in their Readme there is a section on how to use it with create-react-app, but I did not find any info on how to use it with create-react-native-app.
To add these matchers all I need is to create a jest setup file, but create-react-native-app does not seen to allow for custom jest setup file.
So it's possible to a use a custom jest setup file without ejecting from create-react-native-app?
Also is there any way to add a jest setup file for create-react-native-app?
Maybe what you are looking for is http://airbnb.io/enzyme/docs/guides/react-native.html which explains as follows:
Unfortunately, React Native has many environmental dependencies that can be hard to simulate without a host device.
This can be difficult when you want your test suite to run with typical Continuous Integration servers such as Travis.
A pure JS mock of React Native exists and can solve this problem in the majority of use cases.
To install it, run:
npm i --save-dev react-native-mock
After adding that dependency you need to import the /mock within your tests you should good to go. Maybe I am out of context, you can update your problem and give us some extra context so we can craft a better answer.
Ultimately, there is something important to mention in this thread: https://github.com/airbnb/enzyme/issues/928 for the time of this post RN is in version 0.47 and working with react 16 alpha which is not a supported version for enzyme (the people at enzyme only work with rc versions) so if that is your case things looks quite difficult as there is no official support, however, last comment https://github.com/airbnb/enzyme/issues/928#issuecomment-324584942 offers unofficial alternatives
PD: make sure you follow the installation instructions here: http://airbnb.io/enzyme/docs/installation/index.html