Not able to run JavaScript test inside Docker container - javascript

I have tried few of the available docker containers that has the google-chrome installed. Trying to run it in headless mode. few of the tried images are:
selenium/standalone-chrome
zenika/alpine-chrome
Installed nvm and all necessary packages
When running the commands to start test or build, it simply gets stuck
forever.
npm test
or
npm run build
This is the configuration in testee.json
{
"port": 3621,
"root": ".",
"reporter": "Spec",
"timeout": 120,
"delay": 1000,
"tunnel": {
"type": "local"
},
"launch": {
"type": "local"
},
"browsers": [{
"browser": "chrome",
"args": [
"--headless",
"--disable-gpu",
"--remote-debugging-port=9222"
]
}]
}

You need add '--no-sandbox' to browsers -> args object in your testee.json
{
"port": 3621,
"root": ".",
"reporter": "Spec",
"timeout": 120,
"delay": 1000,
"tunnel": {
"type": "local"
},
"launch": {
"type": "local"
},
"browsers": [{
"browser": "chrome",
"args": [
"--headless",
"--no-sandbox',
"--disable-gpu",
"--remote-debugging-port=9222"
]
}]
}
For more information Click here

Related

When i build expo apk not configured app.json and not show app icon and not working deep linking

I am trying to implement a deep link on Android. Please find below the SDK details.
Deep linking is not working on android when the app run "expo start" working propaley use IP address on expo go
Here is my code and try eas build
I use this command
"npx eas build -p android --profile preview"
The app icon also not showing
App.json
{
"expo": {
"name": "Deep Linking",
"slug": "deep-linking",
"version": "1.0.1",
"orientation": "portrait",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.suja.deep-linking"
},
"android": {
"package": "com.sjtest.app",
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [
{
"scheme": "merchants",
"host": "qaspoton.monexfintech.com"
}
],
"category": ["BROWSABLE", "DEFAULT"]
}
],
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "14ae9d60-0012-43af-9ac3-cfe88f618d32"
}
}
}
}
eas.json
{
"cli": {
"version": ">= 3.1.1"
},
"build": {
"preview": {
"distribution": "internal",
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleDebug"
},
"distribution": "internal",
"developmentClient": false
},
"preview3": {
"developmentClient": true
},
"production": {}
},
"submit": {
"production": {}
}
}

How to resolve "import/no-unresolved" in ESLint for import files! for javascript and nodejs?

THIS is my problems
Eslint cannot find the file's location?
This is the error!
Thank You in advance for the help!
I was having this problem!
Eslint cannot find the file's location because the path of the file is not fully defined, we must specify them in the configuration file.
The reference exists and it works, the problem is that eslint cannot find it. I fix it as follows!
Unable to resolve the module path './Board'. note that Board does not have an extension, that's the problem! We just need to specify eslint how to resolve the extensions and voila.
I assume eslint installed and has problems integrating express node and react js projects
You can use the automatic configuration of eslint follow the steps and when it is installed configure your .eslint.json file add the description of settings
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
.eslintrc.json the full file look like:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["plugin:import/recommended", "plugin:react/recommended", "standard"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"semi": [2, "always"],
"comma-dangle": [
"error",
{
"arrays": "only-multiline",
"objects": "only-multiline",
"imports": "only-multiline",
"exports": "only-multiline",
"functions": "only-multiline"
}
],
"space-before-function-paren": 0,
"spaced-comment": [
"error",
"never",
{
"line": {
"markers": ["/"],
"exceptions": ["-", "+"]
},
"block": {
"markers": ["!", "-", "+"],
"exceptions": ["*"],
"balanced": true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
https://eslint.org/docs/user-guide/getting-started

How to add Jest to React app built in Parcel.js

I have a React App built with parcel.js. I've added Jest and I'm attempting to run a basic test, but it looks like the code is not being transformed before hitting the test Jest encountered an unexpected token.
I'm not sure if the Parcel.js part is a red herring, but it's the thing that's a little different from the examples out there.
package.json
{
"name": "cool-tool",
"version": "1.0.0",
"description": "cool tool",
"main": "public/main.js",
"directories": {
"test": "tests"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^23.4.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^23.4.2",
"parcel-bundler": "^1.9.7",
"react-test-renderer": "^16.4.2"
},
"scripts": {
"test": "jest --debug",
"start": "parcel watch assets/js/troubleshooting.js --out-dir public/js",
"build": "parcel build assets/js/troubleshooting.js --out-dir public/js"
},
"jest": {
"testEnvironment": "node"
},
"repository": {
"type": "git",
"url": "shhhh.git"
},
"author": "me",
"license": "ISC"
}
the babel.rc
{
"presets": ["env", "react"]
}
Jest run with the --debug option
{
"configs": [
{
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/v4/0kv69mcn5530g0gshbwwqfgr0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"detectLeaks": false,
"detectOpenHandles": false,
"errorOnDeprecated": false,
"filter": null,
"forceCoverageMatch": [],
"globals": {},
"haste": {
"providesModuleNodeModules": []
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": {},
"modulePathIgnorePatterns": [],
"name": "6f41d9651941a1101334b070800aeec1",
"prettierPath": null,
"resetMocks": false,
"resetModules": false,
"resolver": null,
"restoreMocks": false,
"rootDir": "/Users/me/Projects/coolproject",
"roots": [
"/Users/me/Projects/coolproject"
],
"runner": "jest-runner",
"setupFiles": [
"/Users/me/Projects/coolproject/node_modules/regenerator-runtime/runtime.js"
],
"setupTestFrameworkScriptFile": null,
"skipFilter": false,
"snapshotSerializers": [],
"testEnvironment": "/Users/me/Projects/coolproject/node_modules/jest-environment-node/build/index.js",
"testEnvironmentOptions": {},
"testLocationInResults": false,
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)+(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testRunner": "/Users/me/Projects/coolproject/node_modules/jest-jasmine2/build/index.js",
"testURL": "about:blank",
"timers": "real",
"transform": [
[
"^.+\\.jsx?$",
"/Users/me/Projects/coolproject/node_modules/babel-jest/build/index.js"
]
],
"transformIgnorePatterns": [
"/node_modules/"
],
"watchPathIgnorePatterns": []
}
],
"globalConfig": {
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverage": false,
"collectCoverageFrom": null,
"coverageDirectory": "/Users/me/Projects/coolproject/coverage",
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"coverageThreshold": null,
"detectLeaks": false,
"detectOpenHandles": false,
"errorOnDeprecated": false,
"expand": false,
"filter": null,
"globalSetup": null,
"globalTeardown": null,
"listTests": false,
"maxWorkers": 7,
"noStackTrace": false,
"nonFlagArgs": [],
"notify": false,
"notifyMode": "always",
"passWithNoTests": false,
"projects": null,
"rootDir": "/Users/me/Projects/coolproject",
"runTestsByPath": false,
"skipFilter": false,
"testFailureExitCode": 1,
"testPathPattern": "",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": null,
"watch": false,
"watchman": true
},
"version": "23.4.2"
}
I hope this answer helps some other bone-head. I named the babel configuration file babel.rc, not .babelrc. The second one is correct.

Jest coverage, all values at zero

I introduced code coverage in my project, but all the values (except one) are stuck at zero.
Here is my jest-config.json:
{
"collectCoverageFrom": [
"../shared/utils/*.js"
],
"coverageDirectory": "<rootDir>/coverage",
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"moduleFileExtensions": [
"js"
],
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
},
"moduleDirectories": [
"node_modules",
"job-board/node_modules"
],
"modulePaths": [
"<rootDir>/client"
],
"roots": [
"<rootDir>",
"<rootDir>/../shared"
],
"testRegex": "\\.test\\.js$"
}
My files being tested are in ../shared/src/utils/*.js and my tests are in ../shared/src/utils/__tests__/*.test.js.
And when I run node --harmony_proxies node_modules/jest-cli/bin/jest.js --config ./jest-config.json --coverage, I get this result:
Only, nearly all the functions in those files are fully tested...
Has anyone come across this problem?
Thanks in advance.
Run jest --coverage command to check coverage

Uncaught ReferenceError: require is not defined on Angular 2 webpack global library installation

I'm new to Angular 2. I'm using ng2-charts for my angular 2 project. ng2-charts requires Chart.js to be embedded in my application header, as such:
<script src="node_modules/chart.js/src/chart.js"></script>
From my index.html I can't access nodes_modules (Error: GET http://localhost:4200/node_modules/chart.js/dist/Chart.js) . From what I understand it's because node_modules are not 'compiled' into the dist folder.
Thus I need to add chart.js as a Global Library Installation (as explained here: https://github.com/angular/angular-cli#global-library-installation)
When I do this I get "Uncaught ReferenceError: require is not defined". I assume it's because chart.js is being loaded before systemJS and thus does not know 'require'. I tryed adding systemJS before chart.js in apps[0].scripts but that does not work either.
Here's my angular-cli.json:
{
"project": {
"version": "1.0.0-beta.16",
"name": "poc1-iot-monitor-frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/chart.js/src/chart.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
How would I go about embedding Chart.js or any other external js library?
I'm using angular-cli: 1.0.0-beta.16. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.
Turned out I was linking to the wrong file from my angular-cli.json. Changing angular-cli.json apps[0].scripts to:
...],
"scripts": [
"../node_modules/chart.js/dist/Chart.js"
],
...
did the trick. Also no need to link from index.html anymore.
Thanks to asotog for pointing me in the right direction.
--- EDIT (BONUS INFO) ---
For those wanting to add external libraries to your tests, add them via the karma.conf.js files array:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: "node_modules/chart.js/dist/Chart.js", included: true, watched: false },
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
I have no experience using Chart.js, but per you angular cli config seems you are pointing to the non compiled version of chart js that's why the require errors, you should point to the bundled version.
Based on chart js docs there are some gulp build tasks dedicated to generate the bundle see here https://github.com/chartjs/Chart.js#building-and-testing

Categories

Resources