I created a React Native project using the popular Ignite CLI v2.0.0 with the default boilerplate.
Then I adorned it with a bunch of nodejs shims, because I'll have some node-based dependencies.
Everything is working and I can run the Jest tests from the command line. So far, so good.
However, now one of my unit tests is timing out. This is probably due to an async call failing that invokes a mocked out node function. But there is no information on error, location, etc.
So I want to debug using Visual Studio Code v1.13.1 and here problem starts. I can't for the life of me figure out how to configure this so I can set breakpoints both in the tests as in the app code + node_modules.
I have installed the React Native Tools v0.3.2 and can start the debugger using the default Debug Android configuration:
[vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.myexample.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 13746
Running application "MyApplication" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
But no breakpoints are hit. VS says: Breakpoint ignored because generated code not found (source map problem?). (btw: both index.android.bundle and index.android.map have just been generated in .vscode/.react).
And also I don't see a way to debug through the test code (which lives in ${projectRoot}/Tests).
Based on much googling I created another debug configuration for running Jest in VS Code:
{
"type": "node",
"request": "launch",
"name": "Jest Tests",
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"args": [
"--config",
"package.json",
"--runInBand",
"--verbose",
"--no-cache",
"-u"
],
"runtimeArgs": [
"--nolazy"
],
"console": "internalConsole",
"sourceMaps": true,
"address": "localhost",
"port": 8081,
"outFiles": [
"${workspaceRoot}/.vscode/.react"
],
"env": {
"NODE_ENV": "test"
}
}
This at least runs the tests, showing test report in the VS debug console, but once again no breakpoint anywhere gets hit.
I also tried setting outFiles to the location where ignite generates the bundle, i.e. ${workspaceRoot}/android/app/build/intermediates/assets/debug/* with same results.
Can anyone please point me in the right direction?
PS. I am on Ubuntu 16.04:
System
platform linux
arch x64
cpu 4 cores Intel(R) Core(TM) i7-4500U CPU # 1.80GHz
JavaScript
node 8.1.2 /usr/local/bin/node
npm 4.6.1 /usr/local/bin/npm
yarn 0.24.6 /usr/bin/yarn
React Native
react-native-cli 2.0.1
app rn version 0.45.1
Ignite
ignite 2.0.0 /usr/local/bin/ignite
Android
java 1.8.0_111 /usr/bin/java
android home - undefined
Finally found the solution. It seems there are still a number of issues with the new inspector protocol in Node 8.*. In short the support for --inspect is still quite experimental.
For example the NodeJS Inspector Manager (NiM 0.13.8) was crashing and disconnecting websocket after few second (See: NiM Github issue #17 and Chromium bug #734615).
So I downgraded NodeJS 8.1.2 --> 7.10.1
Now finally things work as expected. I can do all debugging in VS code, hit all the breakpoints, with the following debug configuration:
{
"type": "node",
"request": "launch",
"name": "Launch Tests",
"program": "${workspaceRoot}/node_modules/.bin/jest",
"args": [
"--runInBand",
"--no-cache"
],
"runtimeArgs": [
"--debug-brk=127.0.0.1:5858"
],
"port": 5858
}
Wasted more than a day on something that should be a 5 min. no-brainer. But luckily its working now!
Related
I'm setting up my first hybrid app using cordova / framework7-cli....
all fine, except
cordova run android
freezes with:
"Reading build config file: C:\...\APP\build.json . . . . . . "
and many many more dots.
Tried to
1. cordova build android --release
2. Moved build.json, take a look inside, ok...
3. built a new apk, built a new session, tried another avd ...
build.json:
{
"ios": {
"release": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
},
"development": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
},
"debug": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
}
}
}
However, this freeze causes to break my build-process and nothing happens. normally i can see my app on the selected device...
Does anybody got the same issue?
If using Android Virtual Device make sure to run "Cold Boot Now". This fixed the issue for me
I am trying to compile a 'kitchen-sink' demo, for 'react-native':
NativeBase-KitchenSink
, and I have followed the following links already:
Solution to "React native: Android project not found. Maybe run react-native android first?"
Solution to "Expo : Cannot find a module LogReporter"
That is, from the installation of 'npm' till the installation of required tools using 'Yarn'.
And now I am stuck myself:
a. I run the command npm install in the 'root directory' of this project.
b. Then I run expo start, I see that the problems addressed in link 1 and 2 have gone away.
c. Then when the browser is up, I issue expo build:android
The following error shows up:
[11:14:44] Checking if current build exists...
[11:14:48] No currently active or previous builds for this project.
[11:14:50] Publishing to channel 'default'...
[11:14:56] Building iOS bundle
[11:15:09] Building Android bundle
[11:15:20] Analyzing assets
[11:15:27] Uploading assets
[11:15:27] No assets to upload, skipped.
[11:15:27] Processing asset bundle patterns:
[11:15:27] - D:\Projects\ReactNativeProjects\AwesomeProject\**\*
[11:15:27] Cannot read property 'forEach' of undefined
[11:15:27] TypeError: Cannot read property 'forEach' of undefined
at C:\xdl#51.4.0\src\Project.js:903:26
at Generator.next (<anonymous>)
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
Please help me know where I am wrong? Some posts say the code is correct.
[EDIT]:
I also did a new thing in my 'app.json', just before executing command react-native eject, to create Android and iOS folders:
(Note: It is not mandatory to issue the react-native eject command, as this will cause permanent change according to the documentations)
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
},
"changes": "----below are the changes----",
"name": "AwesomeProject",
"displayName": "AwesomeProject"
}
That is, just when I added:
"name": "AwesomeProject",
"displayName": "AwesomeProject"
at the bottom of my 'app.json'
the command react-native eject started working, which was not working earlier, as the output was:
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
Clearly, it is the hybrid of two different versions of the package managers: 'Expo' and 'npm'.
But the 'forEach' error in the concern here, did not go away.
Further efforts done were useless, so I am not putting them here.
I shall keep on trying until I figure it out.
you have to upgrade the expo cli version
do npm install -g expo-cli
and then expo start again
I resolved this by knowing that I was again mixing up with the package managers: 'npm' and 'yarn', and this time you do not need 'expo' for time being or all-together, so modify your 'app.json', removing expo section.
All I had to do was to issue the following commands in order.
Add React Base
yarn add react-base --save
Install Peer Dependencies
The peer dependencies included from any 'npm' packages does not automatically get installed. Your application will not depend on it explicitly.
react-native link
In the case of this demo project, one dependency was missing:
react-native link react-native-vector-icons
Start Yarn
yarn start
Run on android device or simulator.
react-native run-android
[Note:] Java 8 is recommended to be installed instead of higher versions of Java. see: What to install? Java 8 or Java 10
I wish it helps.
Happy coding :-)
Try changing:
"assetBundlePatterns": ["**/*"] to "assetBundlePatterns": ["assets/*"]
in your app.json file.
I am trying to build an APK file for my CRNA project, using expo. The first issue is, it tries to build iOS every time. Why is it building iOS when I used exp build:android?
Second, iOS only succeeds in building occasionally. It usually hangs at 0%.
The output is below:
> exp build:android
[16:28:36] Making sure project is set up correctly...
-[16:28:38] Warning: Not using the Expo fork of react-native. See https://docs.expo.io/.
[16:28:38] Your project looks good!
[16:28:38] Checking if current build exists...
[16:28:39] No currently active or previous builds for this project.
[16:28:39] Unable to find an existing exp instance for this directory, starting a new one...
[16:28:40] Warning: Not using the Expo fork of react-native. See https://docs.expo.io/.
[16:28:42] Starting Metro Bundler on port 19001.
[16:28:42] Metro Bundler ready.
[16:28:43] Tunnel ready.
[16:28:43] Publishing to channel 'default'...
[16:28:44] Warning: Not using the Expo fork of react-native. See https://docs.expo.io/.
[16:28:44] Building iOS bundle
And then it hanngs indefinitely.
Has anyone came across any of these issues and have any advice?
My app.json is below
{
"expo": {
"sdkVersion": "27.0.0",
"icon": "./test-icon.png",
"entryPoint": "./AppEntry.js",
"ignoreNodeModulesValidation": true,
"packagerOpts": {
"config": "rn-cli.config.js",
"projectRoots": ""
},
"android":{
"package": "expo.android.package",
},
"ios":{
"bundleIdentifier": "expo.ios.package",
},
},
"privacy": "unlisted",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait"
}
expo version: 55.0.4
react-native version: 0.55.4
I am trying to use Protractor tests already working nice on PC to hybrid apps thanks to Appium.
As you guess there is a failure that ruin the chain and no way to find help on google.
This problem is quite hard because there is many software engaged so let me list them :
• Gulp (classic server that launch commands)
• Protractor (test language running over webdriver)
• Phonegap (compile website to app ex: .apk)
• Appium (intermediate server that control mobile device)
• Real device (debug-mode: on)
The process is almost working, I mean the apk is well installed, the application start and after 10 sec waiting, instead of starting the test, it crash/ignore the app.
I present here two scenario because I am not sure which configuration is the good one for my setup.
I leave the details under but in short: first case the app.apk is installed but ignored, and in the other apk start but crash (~3sec later)
Here is Gulp start command :
gulp.task('appium', ['webdriver_update'], function (cb) {
return gulp.src(['packages/custom/*/public/tests/e2e/*.spec.js']).pipe(protractor({
configFile: __dirname + '/../protractor.appium.conf.js',
args: ['--baseUrl', 'http://10.56.160.74:3000'] //My Local IP: Website Port
})).on('error', function (e) {
console.log(e);
});
});
Here is my Protractor/Appium config :
exports.config = {
framework: 'jasmine2',
seleniumAddress: 'http://localhost:4723/wd/hub',
capabilities: {
fullReset: true,
browserName: 'android',
deviceName: "Galaxy Note S3",
platformName: "Android",
platformVersion: "5.1.1",
app: "C:/Projet/Spherea/appca/packages/custom/appca/public/apk/appca.apk",
'app-package': 'com.spherea.appca',
'app-captivity': 'MainActivity',
autoWebview: true //<= On/Off change the scenario
},
onPrepare: function () {
var wd = require('wd'),
protractor = require('gulp-protractor').protractor,
wdBridge = require('wd-bridge')(protractor, wd);
wdBridge.initFromProtractor(exports.config);
}
};
When autoWebview = true :
The application freeze at start, and after 10 sec of failing starting protractor tests, Appium give up and launch the browser and deal with test there, which is NOT what I need.
Error when autoWebview = false :
[launcher] Running 1 instances of WebDriver
ERROR - Unable to start a WebDriver session.
[launcher] Error: UnknownError: Not yet implemented. Please help us: http://appium.io/get-involved.html
at new bot.Error (C:\Projet\Spherea\appca\node_modules\gulp-protractor\node_modules\protractor\node_modules\selenium-webdriver\lib\atoms\error.js:108:18)
at Object.bot.response.checkResponse (C:\Projet\Spherea\appca\node_modules\gulp-protractor\node_modules\protractor\node_modules\selenium-webdriver\lib\atoms\response.js:
109:9)
at C:\Projet\Spherea\appca\node_modules\gulp-protractor\node_modules\protractor\node_modules\selenium-webdriver\lib\webdriver\webdriver.js:379:20
at [object Object].promise.ControlFlow.runInFrame_ (C:/Projet/Spherea/appca/node_modules/gulp-protractor/node_modules/protractor/node_modules/selenium-webdriver/lib/goog
/../webdriver/promise.js:1857:20)
at [object Object].goog.defineClass.notify (C:/Projet/Spherea/appca/node_modules/gulp-protractor/node_modules/protractor/node_modules/selenium-webdriver/lib/goog/../webd
river/promise.js:2448:25)
at [object Object].promise.Promise.notify_ (C:/Projet/Spherea/appca/node_modules/gulp-protractor/node_modules/protractor/node_modules/selenium-webdriver/lib/goog/../webd
river/promise.js:564:12)
at Array.forEach (native)
at [object Object].promise.Promise.notifyAll_ (C:/Projet/Spherea/appca/node_modules/gulp-protractor/node_modules/protractor/node_modules/selenium-webdriver/lib/goog/../w
ebdriver/promise.js:553:15)
at goog.async.run.processWorkQueue (C:\Projet\Spherea\appca\node_modules\gulp-protractor\node_modules\protractor\node_modules\selenium-webdriver\lib\goog\async\run.js:13
0:15)
at runMicrotasksCallback (node.js:337:7)
[launcher] Process exited with error code 100
I hope someone can help me, I already wasted 10 days trying this and I'm now out of idea to solve this issue.
i have tried the same, conclusion is protractor with jasmine/cucumber has no support for native apps it only supports web automation for desktop & web & hybrid apps automation for mobile.
you can find the responses in below link
https://github.com/angular/protractor/issues/1798
Thanks
I face a weird Ionic2 behaviour.
When i deploy my app to a simulator, i can see the .ts file sourceMap in the chrome inspect debugger.
On both case, i use :
ionic run android
On the other side, when i deploy my apk on a real device, the tab "Sources" is completely different with an other groups of directories and, with no reference to my .ts files.
My environment is:
OS X 10.11
Ionic 2 2.0.0-beta.35
cordova 6.3.0
The project has been initially generated by:
ionic start biblio tutorial --v2
ionic.config.json
{
"name": "biblio",
"app_id": "",
"v2": true,
"typescript": true
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"filesGlob": [
"**/*.ts",
"!node_modules/**/*"
],
"exclude": [
"node_modules",
"typings/global",
"typings/global.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Any ideas?
For me the problem was that when you're remote debugging on an android device, Chrome debugger cannot access the source map file on the device. The solution/fix is to include the source map inline. To do this I:
added the below to package.json in the root project directory
"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
},
This is to make the webpack to add source maps inline changed tsconfig.js line
"sourceMap": true,
to
"sourceMap": false
This is to disable typescript to create source map file since this is done by webpack.
After this change everything seems to be working fine. Note that this applies to ionic 2 RC_04