I have some cypress tests running locally using yarn e2e. I am trying to deploy my application to run on AWS amplify. I can see the tests succeed, but when merging using mochawesome-merge, the build process fails with "module not present".
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ spec.cy.ts 00:02 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 00:09 2 2 - - -
2022-11-10T05:07:22.172Z [INFO]:
2022-11-10T05:07:22.253Z [INFO]: Done in 87.90s.
2022-11-10T05:07:22.255Z [INFO]: # Completed phase: test
# Starting phase: postTest
2022-11-10T05:07:22.256Z [INFO]: # Executing command: yarn doc & yarn report
2022-11-10T05:07:22.391Z [INFO]: yarn run v1.22.0
2022-11-10T05:07:22.392Z [INFO]: yarn run v1.22.0
2022-11-10T05:07:22.424Z [INFO]: $ mochawesome-merge --reportDir mochawesome-report > cypress/report/mochawesome.json
2022-11-10T05:07:22.424Z [INFO]: $ node cypress.js
2022-11-10T05:07:22.424Z [INFO]: $ mochawesome-merge --reportDir mochawesome-report > cypress/report/mochawesome.json
2022-11-10T05:07:22.424Z [INFO]: $ node cypress.js
2022-11-10T05:07:22.469Z [WARNING]: node:internal/modules/cjs/loader:988
throw err;
^
Error: Cannot find module '/codebuild/output/src899599699/src/learnerapp/cypress.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
at Function.Module._load (node:internal/modules/cjs/loader:833:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Is this error really complaining about cypress or mochawesome? How can I specify that module to be included in the cypress config?
I am also using the newer version of Cypress and these are the relevant config files.
cypress/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"types": ["cypress"],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": false,
"jsx": "react"
},
"include": ["**/*.ts", "../node_modules/cypress"]
}
Cypress.config.ts
import { defineConfig } from "cypress";
const cucumber: any = require("cypress-cucumber-preprocessor").default;
const webpack: any = require("#cypress/webpack-preprocessor");
export default defineConfig({
reporter: "mochawesome",
reporterOptions: {
reportDir: "cypress/reports/mochawesome",
overwrite: false,
html: false,
json: true,
timestamp: "mmddyyyy_HHMMss",
},
chromeWebSecurity: false,
defaultCommandTimeout: 120000,
execTimeout: 120000,
taskTimeout: 120000,
pageLoadTimeout: 120000,
requestTimeout: 120000,
responseTimeout: 120000,
screenshotsFolder: "cypress/report/screenshots",
videosFolder: "cypress/report/videos",
e2e: {
baseUrl: "http://localhost:3000",
setupNodeEvents(on, config) {
// implement node event listeners here
on('file:preprocessor', cucumber());
const options = {
webpackOptions: require('./cypress/webpack.config.js'),
}
on('file:preprocessor', webpack(options));
},
},
});
Related
I have a fresh Laravel 9 app with Vue 3 SPA built with TS (using Metronic 8.1 template) and I'm using webpack. Whenever I try to build the assets, it stays stuck at 12% and then does absolutely nothing.
Running Laravel using Sail on WSL2. After doing some research I found out that it could be a memory issue, so I tried to change this like so:
.wslconfig
[wsl2]
memory=10GB
localhostForwarding=true
And then running Restart-Service LxssManager as administrator.
However, nothing I've tried so far seems to work. I have another Laravel 9 app in a different container, which does not use any framework and uses vanillaJS and that compiles no problem. Any help here?
webpack.mix.js
const mix = require("laravel-mix");
const path = require("path");
mix.ts("resources/ts/app.ts", "public/js")
.vue({ version: 3 })
.webpackConfig({
module: {
rules: [
{
test: /.mjs$/i,
resolve: {
byDependency: { esm: { fullySpecified: false } },
},
},
],
},
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/ts/src/"),
},
},
});
.tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noImplicitAny": false,
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"#/*": [
"resources/ts/src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"resources/ts/src/**/*.ts",
"resources/ts/src/**/*.tsx",
"resources/ts/src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
I develop an application using Vue and Typescript 4.2.4. I can't use optional parameters in functions. Eslint doesn't complain. My code works fine on TS Playground as well. Here is a sample:
const f = (a: object, b?: object): void => {
console.log(a);
if (b) {
console.log(b);
}
}
f({ lorem: 'ipsum' });
f({ foo: 'bar' }, { optional: 'test' });
Every time I want to compile I get
TS2554: Expected 2 arguments, but got 1.
in first call.
Is there some config to enable or something else I should do? I have no experience with Typescript. I appreciate any help.
Laravel mix:
const mix = require('laravel-mix');
const config = require('./webpack.config');
mix
.webpackConfig(config)
.setResourceRoot(config.output.publicPath)
.disableNotifications()
.ts('resources/assets/js/app.ts', 'public/js').vue().extract()
.sass('resources/assets/sass/app.scss', 'public/css').sourceMaps()
.copyDirectory('node_modules/layout/images/', 'public/images')
.copyDirectory('node_modules/layout/icons/', 'public/icons')
.version();
Webpack config for mix
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: { esModule: true },
},
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
},
],
},
output: {
publicPath: `/${process.env.APP_ALIAS}/` || '/',
chunkFilename: 'chunks/[name].js?id=[chunkhash]',
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*', '!.htaccess', '!index.php', '!robots.txt'],
}),
],
resolve: {
alias: {
'#': path.resolve('resources/assets/js'),
},
},
};
tsconfig
{
"compilerOptions": {
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noImplicitAny": false,
"noImplicitReturns": false,
"noImplicitThis": false,
"noUnusedLocals": true,
"importHelpers": true,
"skipLibCheck": true,
"allowUnusedLabels": false,
"sourceMap": true,
"esModuleInterop": true,
"allowJs": true,
"baseUrl": ".",
"paths": {
"#/*": ["resources/assets/js/*"],
},
"lib": ["esnext", "dom"]
},
"include": [
"resources/assets/js/**/*"
],
"exclude": [
"node_modules",
]
}
EDIT:
Ok, I suppose Typescript in my Laravel project is not working properly. When I changed configuration to:
"noImplicitAny": true,
"noImplicitReturns": true,
my playground code causes another errors:
./resources/assets/js/app.ts 6:11-12
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(6,12)
TS7006: Parameter 'a' implicitly has an 'any' type.
ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts
./resources/assets/js/app.ts 6:14-15
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(6,15)
TS7006: Parameter 'b' implicitly has an 'any' type.
ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts
./resources/assets/js/app.ts 12:0-21
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(12,1)
TS2554: Expected 2 arguments, but got 1.
As you can see, function and parameters have their types defined.
What can be wrong there?
OK, thanks everyone, I have a solution. I figured out that webpack config for ts-loader and vue-loader causes some problems with Laravel Mix. I have just removed rules section from config and left Laravel Mix do the job. My playground code works fine now.
I have a seemingly simple npm script that is failing but I cannot seem to figure out why.
I have the following packages installed globally:
+-- ts-node#8.3.0
+-- tsconfig-paths#3.8.0
+-- typeorm-model-generator#0.3.4
`-- typescript#3.5.2
When I run ts-node from the command line it runs as expected.
In my package.json file I have:
"scripts": {
"ts_test": "ts-node"
},
When I run npm run ts_test I get the following error:
SyntaxError: Unexpected token } in JSON at position 581
at JSON.parse (<anonymous>)
at parse (...\node_modules\tsconfig\src\tsconfig.ts:195:15)
at readFileSync (...\node_modules\tsconfig\src\tsconfig.ts:181:10)
at Object.loadSync (...\node_modules\tsconfig\src\tsconfig.ts:151:18)
at readConfig (...\node_modules\ts-node\src\index.ts:425:18)
at Object.register (...\node_modules\ts-node\src\index.ts:189:18)
at Object.<anonymous> (...\node_modules\ts-node\src\_bin.ts:140:17)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
Any advice on what could cause this error or how to further debug it would be helpful.
Update:
Below is my tsconfig file:
{
"compilerOptions": {
"lib": [
"es2017"
],
"baseUrl": "/",
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictPropertyInitialization": false,
"moduleResolution": "node",
"sourceMap": true,
"target": "es2017",
"outDir": "lib",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
/* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"esModuleInterop": true,
},
"exclude": [
"node_modules"
]
}
JSON specification doesn't support trailing commas. Parsing of your tsconfig.json is failing because of that. Change your tsconfig.json to
{
"compilerOptions": {
"lib": [
"es2017"
],
"baseUrl": "/",
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictPropertyInitialization": false,
"moduleResolution": "node",
"sourceMap": true,
"target": "es2017",
"outDir": "lib",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true
},
"exclude": [
"node_modules"
]
}
i got a problem. Can someome help me !
i want to export file from export button in js page and download file to a directory in my project for testing. But i cant change download default_directory. when i run test, it was downloaded in /Downloads , not /resource/download/ directory.
How can i set download directory for protractor
This is my protractor-config.js
directConnect: true,
multiCapabilities: [
{
browserName: 'firefox',
acceptInsecureCerts: true,
'moz:firefoxOptions': {
args: ["--headless"]
},
prefs: {
'download': {
'prompt_for_download': false,
'default_directory': process.cwd() + "/resources/test/download",
'directory_upgrade': true
},
},
},
{
browserName: 'chrome',
acceptInsecureCerts: true,
chromeOptions: {
args: [
"--headless",
]
},
prefs: {
'download': {
'prompt_for_download': false,
'default_directory': process.cwd() + "/resources/test/download",
'directory_upgrade': true,
},
},
}
],
Try the below one,
capabilities: {
'browserName': 'chrome',
'chromeOptions': {
prefs: {
download: {
'prompt_for_download': false,
'directory_upgrade': true,
'default_directory': process.cwd() + '/resources/test/download' // change in this place
}
}
}
},
Hope it helps you
I have a grunt project set up but I'm missing the sourcemap for sass. The style.css.map looks like this:
{
"version": 3,
"file": "style.css",
"sources": [
"../style.scss",
"../_general.scss",
"../_align.scss",
"../_cf.scss",
"../_fixed-fluid.scss"
],
"sourcesContent": [],
"mappings": "ACAA;EACI,AAAQ;EACR,AAAS;;AAGb;EACI,AAAY;;AAGhB;EACI,AAAe;;AAGnB;EACI,AAAU;EACd,AAAe;IACP,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAY;IACZ,AAAU;IACV,AAAM;IACN,AAAO;IACP,AAAQ;;AAIhB;EACI,AAAS;;AC3Bb;EACE,AAAU;EACV,AAAQ;EACR,AAAY;;AAGd;EACE,AAAU;EACV,AAAK;EACL,AAAM;EACN,AAAW;;AAIb;EACI,AAAS;EACT,AAAO;EACP,AAAY;;AAGhB;EACI,AAAS;EACT,AAAY;EACZ,AAAgB;EAChB,AAAQ;;AAIZ;EACI,AAAY;EACZ,AAAQ;EACR,AAAW;EACf,AAAgB;IACR,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAgB;;AAIxB;EACI,AAAS;EACT,AAAgB;;AC3CpB,AAAG;EACC,AAAS;EACT,AAAS;;ACFb;EACI,AAAO;EACP,AAAO;EACP,AAAY;;AAGhB;EACI,AAAO;EACP,AAAO;;AAIX;EACI,AAAO;EACP,AAAY;EACZ,AAAO;EACP,AAAc",
"names": []
}
The 'sources' path is incorrect. It should be "../sass/style.scss" instead of "../style.scss"
Grunt project file:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9000,
livereload: true,
keepalive: true,
open: true,
hostname: 'localhost'
}
}
},
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true
},
dist: {
files: {
'dist/style.css': 'assets/sass/style.scss'
},
outputStyle: 'expanded'
}
},
autoprefixer: {
single_file: {
src: 'dist/style.css'
}
},
watch: {
options: {
spawn: false,
livereload: true,
},
sass: {
files: ['assets/sass/*.scss'],
tasks: ['sass', 'autoprefixer']
},
html: {
files: ['index.html', 'views/*.html'],
},
js: {
files: ['assets/js/*.js']
}
},
});
};
Anyone know how to configure this sourcemap path correctly in my gruntfile? Thank you!
Source maps have been f***ed in grunt-sass for a while, since version v.18.0 (node-sass v2) I think. I am patiently waiting for the downstream changes from libsass > node-sass to make their way to grunt-sass soon. Node-sass v3 should fix these issues.
I suggest reverting back to version v0.17.0 of grunt-sass so source maps work again