Develop Reference

DetoxRuntimeError: Detox can't seem to connect to the test app(s)! - Android only

I use Detox automation tool for bare React Native project. Everything works perfectly on iOS, but when I run tests on Android I get following errors:
DetoxRuntimeError: Detox can't seem to connect to the test app(s)!
HINT: Have you forgotten to call 'device.launchApp()' in the beginning of your test?
Refer to our troubleshooting guide, for full details: https://wix.github.io/Detox/docs/troubleshooting/running-tests#tests-execution-hangs
and
DetoxRuntimeError: The pending request #9 ("invoke") has been rejected due to the following error: The app has unexpectedly disconnected from Detox server.
Some tests have green status. Tests are run in parallel on multiple emulators.
Below is my configuration for detox:
/detoxrc.json
{
"testRunner": "jest",
"runnerConfig": "e2e/config.js",
"skipLegacyWorkersInjection": true,
"apps": {
"ios": {
"type": "ios.app",
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ProjectName.app",
"build": "RN_SRC_EXT=e2e.js xcodebuild -workspace ios/ProjectName.xcworkspace -scheme ProjectName -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -UseModernBuildSystem=YES -destination 'platform=iOS Simulator,name=iPhone 11'"
},
"android": {
"type": "android.apk",
"binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
"testBinaryPath": "android/app/build/outputs/apk/androidTest/release/app-release-androidTest.apk",
"build": "cd android && RN_SRC_EXT=e2e.js ./gradlew clean assembleRelease assembleAndroidTest -DtestBuildType=release && cd .."
}
},
"devices": {
"simulator": {
"type": "ios.simulator",
"device": {
"type": "iPhone 11"
}
},
"emulator": {
"type": "android.emulator",
"device": {
"avdName": "Pixel_XL"
}
}
},
"configurations": {
"ios": {
"device": "simulator",
"app": "ios"
},
"android": {
"device": "emulator",
"app": "android"
}
}
}
/e2e/config.js
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ["./init.js"],
setupFiles: [
"<rootDir>/../node_modules/react-native/jest/setup.js",
],
testPathIgnorePatterns: ["/node_modules/"],
testMatch: [
"<rootDir>/*.e2e.js"
],
transformIgnorePatterns: [
'node_modules/(?!(jest-)?#react-native|react-native|#react-native-community|#react-navigation)'
],
};
/e2e/init.js - File which is run after environment setup
import detox from 'detox';
import packageFile from '../package.json';
const detoxConfig = packageFile.detox;
jest.setTimeout(120000);
beforeAll(async () => {
await detox.init(detoxConfig, { launchApp: false });
await device.launchApp();
});
afterAll(async () => {
await detox.cleanup();
});
beforeEach(async () => {
await device.reloadReactNative();
});
and test files looks like similar to this one:
describe('some-screen-description', () => {
beforeEach(async () => {
await logInPage.tapLogInButton();
});
it('description', async () => {
await nextScreen.performAction();
});
});
/package.json
"detox": {
"test-runner": "jest",
"runner-config": "e2e/config.js"
}
I use following version of detox: "detox": "^19.6.9".
I use Macbook Pro with M1 processor. Any hints recommended.
Can anyone confirm that it can be problem with installing both APK and test APK ? I don't know how check that both are installed.

in your init.js inside your beforeAll hook, what's the first line doing? Did you try removing that line?
Regarding your apks being installed, if they weren't installed properly, you'd get a different error message(something like the apks couldn't be found, did you run detox build beofre it?). And also looking at your config file + detox build command I'm sure that the apks were built and they're in the right place. To double check you can go to your android's build output directory(see the paths mentioned in binaryPath and testBinaryPath inside your detox config)

Android white screen when running ionic capacitor run with SSL

I'm trying to run a simple test, trying to add ionic and capacitor to an already existing angular project. I have managed to make it work and run correctly but when I add the SSL command to the CLI so that the server runs with HTTPS the app no longer loads and everything I can just see is a blank screen. Moreover if I access the URL manually from the browser everything loads correctly. Could it be there's something wrongly configured in Android Studio or the ionic/capacitor files? I have tried different configurations and different emulated devices w/ different Android versions but there's no use, I haven't been able to make it work. I would certainly appreciate if someone could help me with this...
Running ionic capacitor run android --livereload --external
https://i.stack.imgur.com/ljfUT.png
https://i.stack.imgur.com/8LxNV.png
When I add the --ssl flag to the CLI ionic capacitor run android --livereload --external --ssl
https://i.stack.imgur.com/fS0jV.png
https://i.stack.imgur.com/D3sLL.png
https://i.stack.imgur.com/3v5Bx.png
Capacitor.config
import { CapacitorConfig } from '#capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'iotest',
webDir: './android/www',
bundledWebRuntime: false
};
export default config;
Angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"cli": {
"defaultCollection": "#ionic/angular-toolkit"
},
"schematics": {
"#ionic/angular-toolkit:component": {
"styleext": "scss"
},
"#ionic/angular-toolkit:page": {
"styleext": "scss"
}
},
"projects": {
"iotest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "./android/www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "./node_modules/ionicicons/dist/ionicicons/svg",
"output": "./svg"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "iotest:build:production"
},
"development": {
"browserTarget": "iotest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "iotest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "iotest"
}
Ionic.config
{
"defaultProject": "iotest",
"projects": {
"iotest": {
"name": "iotest",
"integrations": {
"capacitor": {}
},
"type": "angular"
}
}
}
Angular
Angular CLI: 12.1.4
Node: 16.14.0 (Unsupported)
Package Manager: npm 8.3.1
OS: win32 x64
Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1201.4
#angular-devkit/build-angular 12.1.4
#angular-devkit/core 12.1.4
#angular-devkit/schematics 12.1.4
#angular/cli 12.1.4
#schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Warning: The current version of Node (16.14.0) is not supported by Angular.
NPM
Version 8.3.1
My goal is to make it run with SSL since in a future I will need to apply this to an app that needs to be run with HTTPS

From capacitor.config.ts make change like this:
{
...
server: {
url: 'https://your-local-ip:8100' // like: 192.168.1.66:8100
androidScheme: 'https',
clearText: true // just for test
}
...
}
then open two terminal and run
this command's:
ionic cap run android -l --external --ssl
from second terminal run:
ionic serve 0.0.0.0 --ssl
after all if you still see blank page, open a browser from mobile device and go to https://your-host-ip:8100, then make sure the url is trusted.

Capacitor, Nuxt, and VueJS - Push Notifications

I am new to app building and I started using nuxt and capacitor to develop both an ios and android app. I was having trouble integrating push notifications with my app. I am using the #capacitor/push-notifications package. Is there any direction on how to integrate push notifications with nuxt and capacitor using this package. It would help if someone could walk through this step by step.
This is my nuxt.config.json file
import colors from 'vuetify/es5/util/colors'
export default {
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
ssr: false,
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
titleTemplate: '%s - title',
title: 'title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/parse',
'#/plugins/axios',
{ src: '~plugins/leaflet.js', src: '~plugins/vuesocial.js', ssr: false },
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/eslint
// '#nuxtjs/eslint-module',
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
'#nuxtjs/moment',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
'#nuxtjs/toast',
//nuxt-leaflet
'nuxt-leaflet',
['nuxt-stripe-module', {publishableKey:'...',}],
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
toast: {
position: 'bottom-left',
duration: 3000,
},
// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
},
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
transpile: ['parse', 'axios'],
},
}
This is my capacitor.config.json
{
"appId":"com.undefined.mobile",
"appName":"undefined",
"bundledWebRuntime":false,
"npmClient": "yarn",
"webDir":"dist",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"cordova": {},
"server": {
"iosScheme": "nuxtmobile"
}
}
This is my Podfile
platform :ios, '13.0'
use_frameworks!
# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/#capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/#capacitor/ios'
pod 'CapacitorClipboard', :path => '../../node_modules/#capacitor/clipboard'
pod 'CapacitorGeolocation', :path => '../../node_modules/#capacitor/geolocation'
end
target 'App' do
capacitor_pods
# Add your Pods here
end

Metro bundler errors when using module-resolver

I've created a project using expo typescript template. Running on iOS and Android. No web.
I then set up path alias in tsconfig.json as follows:
"paths": {
"#models/*": ["./src/models/*"],
"#navigation/*": ["./src/navigation/*"],
"#services/*": ["./src/services/*"],
"#components/*": ["./tsx/components/*"],
"#screens/*": ["./tsx/screens/*"],
"#assets/*": ["./assets/*"]
}
Correspondingly, I configured babel.config.js as follows:
plugins: [
[
'module-resolver',
{
root: ['./'],
alias: {
'#models': path.resolve(path.dirname('.'), 'src/models'),
'#navigation': path.resolve(path.dirname('.'), 'src/navigation'),
'#services': path.resolve(path.dirname('.'), 'src/services'),
'#screens': path.resolve(path.dirname('.'), 'tsx/screens'),
'#components': path.resolve(path.dirname('.'), 'tsx/components'),
'#assets': path.resolve(path.dirname('.'), 'assets'),
}
}
]
]
The above configuration works. App is bundled and runs fine. However the following non-critical errors are emitted during bundle:
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/src/navigation/AppNavigator" in file /Users/jblues/LOSMobileApp/tsx/App.tsx.
transform[stderr]: Could not resolve "/Users/jblues/LOSMobileApp/tsx/components/BottomTabNavigator" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/tsx/screens/Login" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
. . and so on. Is there something that I can add to my config to prevent these errors?

You are missing the extensions configuration, for example:
extensions: ['.js', '.ts', '.ios.js', '.ios.ts', '.android.js', '.android.ts', '.json'],
This is a babel.config.js file which i have and it works without error. It might be useful for your reference.
const MODULE_RESOLVER = [
'module-resolver',
{
extensions: ['.js', '.ios.js', '.android.js', '.json'],
alias: {
'#Components': './App/Components',
'#Navigation': './App/Navigation',
'#Constants': './App/Constants',
'#Features': './App/Features',
'#Services': './App/Services',
'#Fixtures': './App/Fixtures',
'#Themes': './App/Themes',
'#Config': './App/Config',
'#Sagas': './App/Sagas',
'#Redux': './App/Redux',
'#Types': './App/Types',
'#I18n': './App/I18n',
'#Lib': './App/Lib',
},
},
];
module.exports = {
plugins: [MODULE_RESOLVER],
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: ['ignite-ignore-reactotron', MODULE_RESOLVER],
},
},
};

'socket.io error on connect: Error: xhr poll error' while importing zone.js when using Karma/Jasmine in Angular 2 with NativeScript 2.0 [1.7.1]

I'm getting the below error while running my tests using Karma with Jasmine in my Angular2 with NativeScript project. The tests are being executed correctly, but, this error keeps repeating in the console. I observed the error is coming only after importing zone.js (imported it because it says zone is not defined while using inject, etc from Angular2/testing).
Error:
JS: NSUTR-socket.io: transport error JS: NSUTR-socket.io: 1 JS: NSUTR: socket.io error on connect: Error: xhr poll error JS: NSUTR-socket.io: 2 JS: NSUTR: socket.io error on connect: Error: xhr poll error 04 05 2016 12:33:42.046:WARN [NativeScript / 23 (6.0; Google Nexus 6P -
6.0.0 - API 23 - 1440x2560)]: D isconnected (1 times), because no message in 10000 ms.
JS: NSUTR-socket.io: 3 JS: NSUTR: socket.io error on connect: Error: xhr poll error JS: NSUTR-socket.io: 4 JS: NSUTR: socket.io error on connect: Error: xhr poll error
My spec (test) file:
import 'reflect-metadata';
import 'zone.js/dist/zone.min.js';
import {Home} from '../components/home/home';
import {inject, beforeEachProviders, it, describe, expect} from 'angular2/testing';
beforeEachProviders(() => [Home]);
describe('Home Page ActionBar Title Test', () => {
// it('Title has text', () => {
it('Title has text', inject([Home], (homeObj: Home) => {
expect(homeObj.title).toBe('CapacityReview');
// expect(true).toBe(true);
}));
});
Package.json:
"dependencies": {
"angular2": "2.0.0-beta.16",
"es6-shim": "0.35.0",
"nativescript-angular": "0.0.46",
"nativescript-intl": "0.0.2",
"nativescript-unit-test-runner": "^0.3.3",
"parse5": "1.4.2",
"punycode": "1.3.2",
"querystring": "0.2.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"tns-core-modules": "2.0.0",
"url": "0.10.3",
"zone.js": "0.6.12"
},
"devDependencies": {
"babel-traverse": "6.7.6",
"babel-types": "6.7.7",
"babylon": "6.7.0",
"filewalker": "0.1.2",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-nativescript-launcher": "^0.4.0",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.3.1",
"typescript": "^1.8.10"
}
karma.conf.js (default one):
>
module.exports = function(config) { config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'app/**/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [],
customLaunchers: {
android: {
base: 'NS',
platform: 'android'
},
ios: {
base: 'NS',
platform: 'ios'
},
ios_simulator: {
base: 'NS',
platform: 'ios',
arguments: ['--emulator']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false }) }

Resolved!!
After I changed the import of zone.js from
import 'zone.js/dist/zone.min.js';
to
import 'zone.js/dist/zone-node';
Thanks to Hristo Deshev for helping me out on this.