I'm using Mocha with react-native-mock to run tests on React Native applications. However, I'm having issues when running tests on components which import platform-specific files, e.g. require('./MyComponent') resolves to MyComponent.android.js when running on Android. I'd like to be able to configure Mocha or Babel (whichever is appropriate) to be able to resolve these requires based on some configuration, e.g. an environment variable.
I'm aware of another solution which involves adding another file manually, but I'm specifically looking for something that automates this.
Related
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've just created a new "vue native" project. I didn't change anything in the default blank app.
I managed to run it on my android device, but impossible to run it on my browser.
I run "npm start" => "metro bundler" opens.
Then I click on "Run in web browser" and I get the error below :
Again, I didn't change anything. I just want to start the default app generated automatically when starting a new project.
Anyone already faced this problem?
Thank you
"This is a known issue, and it seems running vue-native app in web is not possible at the moment, because AppEntry.js tries to import ../../App. The default packager configuration specifies .json as a valid file extension. For some reason, in web, Expo seems to be looking for App.json and ignores App.vue."
https://github.com/GeekyAnts/vue-native-core/issues/268
See the official statement from vue-native creators 2020 7th of July:
"On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet.On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet."
https://github.com/GeekyAnts/vue-native-core/issues/268#issuecomment-640222479
Good news that devices and on simulator running works with expo, and mostly vue-native was designed to run on mobile devices not on web :)
For the web you can have a similar codebase using vuejs.
I know it might be very basic question. But I am very new and got a codebase with only android support. I need to add iOS for it. Please help me
As you're aiming to build a cross-platform app, React Native provides two ways to organize the code and seperate it by platform: platform module or platform-specific file extensions.
As you already have an Android app, I assume it has more complexity so you might want to split the code out into separate files.
You say you have an Android app but i don't thing that at any point you specified that the app should only build for Android (you can review in the package and the project configuration). So, the following command should be enough:
react-native run-ios
If you created your react native app from a template (e.g. using npx react-native init ProjectName), it already provides an ios and android folder, so it already supports it. If the file is not there, you could follow the instructions that #Rajan shared above to recreate the ios folder.
If your problem is running the iOS application using npm run ios, and its failing to build or the javascript throws an error, the quickest thing to try is cd ios, then pod install. If this does not work, it might be because you have additional dependencies you have installed, which require specific instructions and configuration to be done in the ios folder. This is library dependent, if needed, will be explained in depth in the README.md of the library. For example, react-native-firebase has a lot of steps, and is different to the android configuration.
Sometimes it is helpful to modify these configurations in XCode instead of editing the files manually (e.g. plist, xml, xproj). You can open xcode quickly using xed ios when in the root project folder.
Note: As usual, remember to have the libraries available in the node_modules folder, npm install.
In the future, you might choose to run different javascript code based on the platform (platform-specific code). React native allows that by using file.android.js and file.ios.js. However, your IDE is likely to struggle with the 2 files, and won't be as helpful compared to file.js. Alternatively, you can import Platform and conditionally check at runtime, what your platform is.
If you used Expo, you don't have access to the native code, but will already support iOS.
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