Cannot find module '#cypress/code-coverage/task' - cypress

I'm using cypress to automate browserstack, I try to automate from local first, but when I npx browserstack-cypress run –sync, there's error:
error: Cypress could not run any of the specs in the build since an exception occurred. The stacktrace of the error is given below:
---------------------------------------------------------------------------------------------
Your pluginsFile threw an error from: .\tests\e2e\plugins\index.js
Error: Cannot find module '#cypress/code-coverage/task'
Require stack:
- .\tests\e2e\plugins\index.js
- \cypress_package\9.6.1\app\packages\server\lib\plugins\child\run_plugins.js
- \cypress_package\9.6.1\app\packages\server\lib\plugins\child\index.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at module.exports (.\tests\e2e\plugins\index.js:17:14)
at \cypress_package\9.6.1\app\packages\server\lib\plugins\child\run_plugins.js:94:12
at tryCatcher (\cypress_package\9.6.1\node_modules\bluebird\js\release\util.js:16:23)
at Function.Promise.attempt.Promise.try (\cypress_package\9.6.1\node_modules\bluebird\js\release\method.js:39:29)
at load (\cypress_package\9.6.1\app\packages\server\lib\plugins\child\run_plugins.js:91:7)
at EventEmitter.<anonymous> (\cypress_package\9.6.1\app\packages\server\lib\plugins\child\run_plugins.js:209:5)
at EventEmitter.emit (events.js:400:28)
at process.<anonymous> (\cypress_package\9.6.1\app\packages\server\lib\plugins\util.js:19:22)
at process.emit (events.js:400:28)
at emit (internal/child_process.js:912:12)
at processTicksAndRejections (internal/process/task_queues.js:83:21)
cypress run process exited with code 1
cypress run failed, exiting with code: 1
And here is my code:
./browserstack.json
{
"auth": {
"username": "XXXX",
"access_key": "XXXX"
},
"browsers": [
{
"browser": "chrome",
"os": "Windows 10",
"versions": [
"latest",
"latest-1"
]
}
],
"run_settings": {
"cypress_config_file": "./cypress.json",
"project_name": "project-name",
"build_name": "build-name",
"exclude": [],
"parallels": 5,
"npm_dependencies": {},
"package_config_options": {},
"headless": true,
"spec_timeout": 10
},
"connection_settings": {
"local": false,
"local_identifier": null,
"local_mode": null,
"local_config_file": null
},
"disable_usage_reporting": false
}
./cypress.json
{
"pluginsFile": "tests/e2e/plugins/index.js",
"viewportWidth": 1280,
"viewportHeight": 800
}
./tests/e2e/plugins/index.js
module.exports = (on, config) => {
on("task", require("#cypress/code-coverage/task"));
on("file:preprocessor", require("#cypress/code-coverage/use-browserify-istanbul"));
return Object.assign({}, config, {
fixturesFolder: "tests/e2e/fixtures",
integrationFolder: "tests/e2e/specs",
screenshotsFolder: "tests/e2e/screenshots",
videosFolder: "tests/e2e/videos",
supportFile: "tests/e2e/support/index.js"
});
};
./tests/e2e/support/index.js
import '#cypress/code-coverage/support'; // I DO import code-coverage here
import "./commands";
require('cypress-xpath');
If I delete pluginsFile in cypress.json, and add test in ./cypress/integration, then everything will be just find.
I don't know that I did anything wrong, please help, thanks.

Related

Getting error : Support for the experimental syntax 'jsx' isn't currently enabled . When trying to add animation in react-native-web project

In my project, I'm using the reanimate library to add animations, but I'm receiving an error
https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled
I follow all the steps mention in the link but none of them work for me
My package.json file
{
"name": "animation",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-spring/native": "^9.6.1",
"#react-spring/web": "^9.6.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"babel-polyfill": "^6.26.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-reanimated": "^2.14.4",
"react-native-web": "^0.18.10",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
// web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname, "../");
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "index.web.js"),
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
],
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: [
"#babel/preset-react",
"module:metro-react-native-babel-preset",
],
// Re-write paths to import only the modules needed by the app
plugins: [
"#babel/plugin-syntax-jsx",
"react-native-web",
"react-native-reanimated/plugin",
],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
esModule: false,
},
},
};
module.exports = {
entry: [
// load any web API polyfills
path.resolve(appDirectory, "polyfills-web.js"),
// your web-specific entry file
path.resolve(appDirectory, "index.web.js"),
],
// configures where the build ends up
output: {
filename: "bundle.web.js",
path: path.resolve(appDirectory, "dist"),
},
// ...the rest of your config
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
}),
new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
new webpack.DefinePlugin({ process: { env: {} } }),
],
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
"react-native$": "react-native-web",
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: [".web.js", ".js"],
},
};

Fastify with Heroku

I am having a simple Fastify server hosted with Heroku. But, it seems not working ! But, it seemed all right during the development! The error I get is: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch. Full error I am getting:
Here is the code I am using:
server.js:
const fastify = require("fastify")();
const path = require("path");
fastify.register(require("fastify-static"), {
root: path.join(__dirname, "/"),
});
fastify.get("/", function (req, reply) {
reply.sendFile("index.html");
});
fastify.listen(process.env.PORT || 5000, (err) => {
if (err) throw err;
console.log(`server listening on ${fastify.server.address().port}`);
});
package.json:
{
"name": "test1",
"version": "1.0.0",
"description": "",
"main": "server.js",
"engines": {
"node": "15.11.x"
},
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"fastify": "^3.14.0",
"fastify-static": "^4.0.1"
}
}
Sometimes, the site even doesn't load!
Any help is greatly appreciated !
Thanks !
That's an issue with the library. For other libraries (express, django, etc..) specifying the address is not necessary.
See https://github.com/fastify/fastify/issues/709
Change:
.listen(process.env.PORT)
to:
.listen(process.env.PORT, '0.0.0.0')
When I use both nodemon as local server and Heroku for production the following works for me:
await fastify.listen(process.env.PORT, process.env.HOST || '0.0.0.0');
and in package.json
"dev": "PORT=${PORT:=3000} HOST=${HOST:=localhost} nodemon"

jest-html reporter not generating result when there are failing test cases

Does not generate index.html/test report when there are failing test cases and includeFailureMsg = true
package.json
"name": "test",
"jest": {
"transform": {},
"verbose": true,
"bail": true,
"testMatch": ["path"],
"testResultsProcessor": "./node_modules/jest-html-reporter"
},
"jest-html-reporter": {
"pageTitle": "Your test suite",
"outputPath": "test-report.html",
"includeFailureMsg": true
},
"dependencies": {
"jest-html-reporter": "^2.3.0"
}
By using jest-stare package.I'm able to resolve my issue, hope it helps to other.

VSCode Typescript Angular 2 Debug Error

I have a problem on debugging typescript using VSCode. I use angular v2.4.4, typescript v2.1.5, npm v3.10.10, and node v6.9.4.
tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"sourceMap": true,
"target": "es6"
},
"exclude": [
"node_modules"
]
}
launch.json:
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\app\\main.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
main.js:
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
//# sourceMappingURL=c:/workspace/myapp/main.js.map
Debug Console:
node --debug-brk=10387 --nolazy app\main.js
Debugger listening on [::]:10387
c:\workspace\myapp\app\main.js:1
(function (exports, require, module, __filename, __dirname) { import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
at ontimeout (timers.js:365:14)
at tryOnTimeout (timers.js:237:5)
at Timer.listOnTimeout (timers.js:207:5)
The compilation is done without any error. What should I do to fix this debug error?
I added the following code to give the clearer picture on how my web app works.
system.config.js:
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true,
target: "es6",
module: "commonjs"},
map: {
'#angular': 'node_modules/#angular',
'rxjs' : 'node_modules/rxjs'
},
paths: {
'node_modules/#angular/*': 'node_modules/#angular/*/bundles'
},
meta: {
'#angular/*': {'format': 'cjs'}
},
packages: {
'app' : {main: 'main', defaultExtension: 'ts'},
'rxjs' : {main: 'Rx'},
'#angular/core' : {main: 'core.umd.min.js'},
'#angular/common' : {main: 'common.umd.min.js'},
'#angular/compiler' : {main: 'compiler.umd.min.js'},
'#angular/router' : {main: 'router.umd.min.js'},
'#angular/platform-browser' : {main: 'platform-browser.umd.min.js'},
'#angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'}
}
});
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
import ApplicationComponent from './components/application/application';
import CarouselComponent from "./components/carousel/carousel";
import FooterComponent from "./components/footer/footer";
import NavbarComponent from "./components/navbar/navbar";
import ProductItemComponent from "./components/product-item/product-item";
import SearchComponent from "./components/search/search";
import StarsComponent from "./components/stars/stars";
import {ProductService} from "./services/product-service";
import HomeComponent from "./components/home/home";
import ProductDetailComponent from "./components/product-detail/product-detail";
#NgModule({
imports: [ BrowserModule,
RouterModule.forRoot([
{path: '', component: HomeComponent},
{path: 'products/:prodTitle', component: ProductDetailComponent}
]) ],
declarations: [ ApplicationComponent,
CarouselComponent,
FooterComponent,
NavbarComponent,
HomeComponent,
ProductDetailComponent,
ProductItemComponent,
SearchComponent,
StarsComponent],
providers: [ProductService,
{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [ ApplicationComponent ]
})
export class AppModule { }

How to build webpack on heroku?

What is the best way to trigger Webpack build after deploying to Heroku?
Push already bundled version in not the most beautiful solution.
What kind of application is this? If you are using a package.json, you could run webpack in the postinstall step using npm scripts.
I have solved this issue by placing devDependencies in normal dependencies, and I changed the postinstall script to:
node_modules/.bin/webpack
You can set postinstall in your package.json to the following NODE_ENV=production webpack -p
Then set start to node
But you will need to make sure to config your webpack for production either by setting it within your webpack.config.js or webpack.config.js(production) as a production config.
I set everything within my webpack.config.js as follows..
const path = require('path');
const webpack = require('webpack');
const debug = process.env.NODE_ENV !== "production";
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'src'),
filename: 'bundle.js'
},
devtool: debug ? "inline-sourcemap" : null,
module: {
loader: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['angular']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
},
devServer: {
historyApiFallback: true,
contentBase: 'src'
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {except: ['$', 'exports', 'require', 'app']},
compress: {warnings: false},
sourceMap: false
})
]
}
so basically, once the command runs npm run postinstall bundle will be generated in the directory as per webpack.config.js (output). But remember to include in your package.json with the commands NODE_ENV=production webpack -p before running 'npm start'. See example below..
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "./src/bundle.js",
"engines": {
"node": "6.4.0"
},
"scripts": {
"start": "node ./src/server.js",
"postinstall": "NODE_ENV=production webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": ...

Resources