Jhipster generated front end gateway NPM lint test errors - node.js

I am using Jhipster and have created a gateway application with front end. I have made a pipline on github which s trying to run front end tests i.e. npm run test
However the tests are failing with over 200 errors in tyescript. Mostly the same error as seen below.
I know I can go though each file and try correct all errors but I am wondering why/how jhipster created all invalid ts files. Is it possibly a versioning issue as I did do a jhipster upgrade but I am not sure if these tests were passing before as pipeline is only new and i never ran locally.
For reference i am using latest jHipster 6.6.0 and have latest node LTS release installed 12.4.1 and npm 6.13.6. However in Jhipster generated pom it pulls dependency for node 12.13.1 and npm 6.13.4.
Over 260 of these errors and some other
error expected call-signature: 'countDeleteButtons' to have a typedef (tslint:typedef) #typescript-eslint/tslint/config
error Async arrow function has no 'await' expression #typescript-eslint/require-await
Also I had to edit numerous ts files to fix broken module imports to get the webpack build to complete before getting this far. Again just wondering how jHipster is generating files with such errors.
Update - I got all passing by configuring tslint to ignore these error. However I'm not sure why the Jhipster generated files are containing errors out of box.
Now "npm run webpack:prod" failing with hundreds of errors such as below
src/test/javascript/spec/app/entities/jawnapp/comment/comment.service.spec.ts:18:9 - error TS7034: Variable 'expectedResult' implicitly has type 'any' in some locations where its type cannot be determined.
src/test/javascript/spec/app/entities/jawnapp/comment/comment.service.spec.ts:48:16 - error TS7005: Variable 'expectedResult' implicitly has an 'any' type.
.yo-rc.json
{
"generator-jhipster": {
"promptValues": {
"packageName": "com.jawndoe.gate",
"microservicePath": "../jawnapp"
},
"jhipsterVersion": "6.6.0",
"applicationType": "gateway",
"baseName": "jawngate",
"packageName": "com.jawndoe.gate",
"packageFolder": "com/jawndoe/gate",
"serverPort": "8080",
"authenticationType": "oauth2",
"cacheProvider": "hazelcast",
"enableHibernateCache": true,
"websocket": "spring-websocket",
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "postgresql",
"searchEngine": "elasticsearch",
"messageBroker": "kafka",
"serviceDiscoveryType": "eureka",
"buildTool": "maven",
"enableSwaggerCodegen": true,
"useSass": true,
"clientPackageManager": "npm",
"clientFramework": "angularX",
"clientTheme": "lux",
"clientThemeVariant": "dark",
"testFrameworks": ["gatling", "cucumber", "protractor"],
"jhiPrefix": "gate",
"entitySuffix": "",
"dtoSuffix": "DTO",
"otherModules": [],
"enableTranslation": false,
"blueprints": [],
"embeddableLaunchScript": false,
"creationTimestamp": 1579646926343,
"herokuAppName": "jawngate",
"herokuDeployType": "jar"
}
}

If I copy and paste your .yo-rc.json into an empty directory and run jhipster (with version 6.6.0), it all seems to work. Results of npm test:
Test Suites: 11 passed, 11 total
Tests: 51 passed, 51 total
Snapshots: 0 total
Time: 21.041s
Ran all test suites.
Execution time: 32 s.
I suspect something might've been missed in the upgrade process. I'd suggest creating a new app with 6.6.0, then compare the directories with SmartSynchronize and manually make the changes to upgrade.

Related

How do I use recent version Ava with express and babel?

I want to use Ava for my node.js project with express and babel.
It does not seem to be possible to use that combination with Ava version 4+ c.f. https://github.com/avajs/ava/issues/2955 (or maybe the bug is not blocking, but simply a matter of changing the recipe - but to what?).
So moving on to using version 3.15.0 instead:
npm install --save-dev #ava/babel
npm install --save-dev ava#3.15.0
I tried the following configuration in package.json:
"ava": {
"babel": true,
"files": [
"test/**/*"
],
"concurrency": 1,
"failFast": true,
"failWithoutAssertions": true
},
And I get the following error message:
✖ Internal error
TypeError: Cannot read properties of undefined (reading '1')
TypeError: Cannot read properties of undefined (reading '1')
at Plugin.manipulateOptions (/mypath/node_modules/babel-plugin-module-resolver/lib/index.js:88:9)
at normalizeOptions (/mypath/node_modules/#babel/core/lib/transformation/normalize-opts.js:56:16)
at run (/mypath/node_modules/#babel/core/lib/transformation/index.js:31:93)
at run.next (<anonymous>)
at Object.transform (/mypath/node_modules/#babel/core/lib/transform.js:25:41)
For the same node.js express setup I was able to use ava version 0.25.0 with the configuration below, but I would prefer using a more recent version ;o):
"ava": {
"source": "src/**/*.js",
"files": "test/**/*.js",
"tap": true,
"require": "babel-register",
"babel": "inherit"
},

How can I disable the code coverage folder that PhpStorm creates when tests are run?

With the latest version (currently 2021.1) of PhpStorm when running tests it adds a coverage folder to my src directory.
It appears to be a code coverage report for all files. Is there a way to stop it doing that?
I have never used it and often forget to add it to my .gitignore file and it often gets committed.
For us it is unnecessary.
EDIT 2021-06-03
As per LazyOne's comment below, it does seem to be jest.
I was unaware that it was a jest only issue as I don't use PHP at the moment (though still have the editor).
It only started happening on recent updates hence my confusion.
Setting the coverageDirectory to something different indeed moves the coverage folder.
Removing all coverage settings, and running a test with coverage still does create the folder.
Here is a screenshot of the folder that is being created looks like.
Jest config is currently
{
"globalSetup": "../jest.setup.ts",
"setupFilesAfterEnv": ["../jest.setupFiles.ts"],
"rootDir": "src",
"moduleFileExtensions": ["js", "json", "ts"],
"collectCoverage": true,
"collectCoverageFrom": [
"./**/*.{ts,js}",
"!./**/tests/**/*",
"!./**/mocks/**/*",
"!./**/routes.*",
"!./**/config/**/*",
"!./**/__tests__/**/*",
"!./**/__mocks__/**/*",
"!./**/test/**/*",
"!./**/exports.*",
"!./src/coverage"
],
"coverageReporters": ["text", "text-summary"],
"coverageDirectory": "../coverage",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)x?$",
"testPathIgnorePatterns": [],
"transform": {
"^.+\\.(ts)?$": "ts-jest"
}
}

How to correctly build an electron nodejs program into an .exe?

I'm using Electron v2.0.8, Node v8.9.3, npm 6.4.1. I've created a simple "Hello world" program using html, css, js alongwith npm.
The program works really fine when I cd to the program directory and npm start. But when it is build(packaged) using, electron-packager <sourcedir> <appname> --platform="win32", the "sweetalert" is not showing its message, which did show when using npm start. But the buttons function as supposed. ("Clears the text field")
I suspect this has something to do with the file paths or something, but being new to this whole framework, I have no clue.
I don't know whether my whole "creating an .exe approach" is 100% correct or not. I've tried with electron-forge but it gave so many errors so I gave up on it and switched to electron-packager instead. None of the online helps work for me(I believe due to different versions) Someone please help.
For anyone else facing a similiar issue. Actually my program was built correctly and there was no error in the code.
What had happened was that the file paths were not correctly configured. When I manually copied the necessary files for the "sweetalert" to run, it showed up the message. Thus no errors specific to sweetalert.
I'll have to find a way to solve the 'path' issue anyways.
UPDATE:
Adding the code
"extraFiles": [
"folder_to_be_included_in_build"
],
into the package.json file now copies the needed folder during "building" the app. Now no need to copy the folder manually to the build.
package.json etc...
"repository": {
"url": "https://github.com/your/repo.git",
"type": "git"
},
"author": {
"name": "Author name"
},
"main": "./afolder/main.js",
"build": {
"productName": "The product name",
"compression": "maximum",
"files": [
"./afolder",
"./node_modules",
"./package.json"
],
"appId": "any.id.app",
"asar": true,
"win": {
"icon": "./your/icon/path/icon.ico",
"target": "nsis"
},
"nsis": {
"oneClick": false,
"installerIcon": "./afolder/your/icon/path/icon.ico",
"uninstallerIcon": "./afolder/your/icon/path/icon.ico",
"perMachine": false,
"deleteAppDataOnUninstall": true,
"artifactName": "${productName} ${os} ${arch} v${version} setup.exe",
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "ShortcutName"
},
"asarUnpack": [
//remove this comment ...
//packages you want to include after install.
//for e.g.
"./node_modules/electron-window-state",
"./node_modules/fs-extra",
"./node_modules/7zip-bin"
],
"npmRebuild": false,
"nodeGypRebuild": false,
"directories": {
"output": "../installer/${productName} v${version} setup"
}
},
"scripts": {
"start": "electron .",
"installer": "yarn build --x64"
},
package.json etc...
You will need "npm install electron-builder yarn --save-dev"
Amend your package.json file with the above content (change productName etc... to your custom needs)
npm run installer
you should see a folder called installer generated on the parent directory

Use of bootstrap theme on Jhispter?

I'm not a pro with jhipster and web application programmation.
So maybe my question is stupid, I would like to know if it's possible to use a Bootstrap theme like the one you can find here : link for Jhipster's homepage?
If yes what should I change to update the CSS in Jhipster and how should I adapt the JavaScript files?
If it's not possible with Bootstrap do you have something similar that can be used on Jhipster?
Here is my Jhipster version:
{
"generator-jhipster": {
"promptValues": {
"packageName": "com.mycompany.myapp"
},
"jhipsterVersion": "4.6.2",
"baseName": "testdesign",
"packageName": "com.mycompany.myapp",
"packageFolder": "com/mycompany/myapp",
"serverPort": "8080",
"authenticationType": "jwt",
"hibernateCache": "ehcache",
"clusteredHttpSession": false,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "mysql",
"searchEngine": "elasticsearch",
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSocialSignIn": false,
"jwtSecretKey": "aba9f3a1b9b0feaa096db087cc1d692102a1f6b6",
"clientFramework": "angularX",
"useSass": true,
"clientPackageManager": "yarn",
"applicationType": "monolith",
"testFrameworks": [],
"jhiPrefix": "jhi",
"otherModules": [
{
"name": "generator-jhipster-primeng",
"version": "2.0.53"
}
],
"enableTranslation": false
}
}
You need to import the necessary files of the theme you want. Most bootstrap themes are composed of CSS files and some JS mainly, etc.
Import those files in your jhipster project could do it through "vendor.ts", with the following steps.
Go to "myprojectjh\src\main\webapp\content".
Create a folder for your theme. (ex. "mytheme01").
Open the created folder and copy the necessary files of the theme (ex: "theme.css").
Go to "myprojectjh\src\main\webapp\app" and open the file "vendor.ts".
Write the following line to import the necessary files (ex: "theme.css").
import '../content/mytheme01/theme.css'.
Save the changes and run your application again.
Your file vendor.ts could look like this:
NOTE: Additionally, you can edit the file "_bootstrap-variables.scss" or "global.scss" to make some other necessary adjustments so that your theme is displayed correctly.
I hope that helps you.
JHipster does use Bootstrap already, and ng-bootstrap for angular widgets. In a generated project, look at the file src/main/webapp/content/scss/vendor.scss to see the import statement for bootstrap SCSS. Update this to link to your desired theme's scss files, and find where to add or replace references to additional javascript files. Make sure you're familiar with Angular and SCSS/SASS files first! :)

jest hangs indefinitely, runs no tests

Every time I run jest it never runs anything. I have let the counter go arbitrarily high. I have run jest with --no-cache
jest --debug output is as follows:
{
"configs": [
{
"automock": false,
"browser": false,
"cache": true,
"cacheDirectory": "/var/folders/7v/64n1tsk11zs2pbwf5bm_c9kc0000gn/T/jest_dx",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"detectLeaks": false,
"forceCoverageMatch": [],
"globals": {},
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": [
[
"^React$",
"/Users/skilurus/github/flock-react-app/node_modules/react"
]
],
"modulePathIgnorePatterns": [
"/Users/skilurus/github/flock-react-app/node_modules/react-native/Libraries/react-native/"
],
"name": "b29a126b130a0be47202d3bc7b00f1b4",
"resetMocks": false,
"resetModules": false,
"restoreMocks": false,
"rootDir": "/Users/skilurus/github/flock-react-app",
"roots": [
"/Users/skilurus/github/flock-react-app"
],
"runner": "jest-runner",
"setupFiles": [
"/Users/skilurus/github/flock-react-app/node_modules/regenerator-runtime/runtime.js",
"/Users/skilurus/github/flock-react-app/node_modules/react-native/jest/setup.js",
"/Users/skilurus/github/flock-react-app/test-setup.js"
],
"snapshotSerializers": [
"/Users/skilurus/github/flock-react-app/node_modules/enzyme-to-json/serializer.js"
],
"testEnvironment": "/Users/skilurus/github/flock-react-app/node_modules/jest-environment-jsdom/build/index.js",
"testEnvironmentOptions": {},
"testLocationInResults": false,
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/",
"e2e"
],
"testRegex": "",
"testRunner": "/Users/skilurus/github/flock-react-app/node_modules/jest-jasmine2/build/index.js",
"testURL": "about:blank",
"timers": "real",
"transform": [
[
"^.+\\.js$",
"/Users/skilurus/github/flock-react-app/node_modules/babel-jest/build/index.js"
],
[
"^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$",
"/Users/skilurus/github/flock-react-app/node_modules/react-native/jest/assetFileTransformer.js"
]
],
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-navigation|react-native-fabric|tipsi-stripe)"
],
"watchPathIgnorePatterns": []
}
],
"globalConfig": {
"bail": false,
"changedFilesWithAncestor": false,
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"coverageDirectory": "/Users/skilurus/github/flock-react-app/__coverage__",
"coverageReporters": [
"json",
"lcov",
"text"
],
"coverageThreshold": {
"global": {
"branches": 70,
"functions": 75,
"lines": 85,
"statements": 80
}
},
"detectLeaks": false,
"expand": false,
"globalSetup": null,
"globalTeardown": null,
"listTests": false,
"mapCoverage": false,
"maxWorkers": 7,
"noStackTrace": false,
"nonFlagArgs": [],
"notify": false,
"notifyMode": "always",
"passWithNoTests": false,
"rootDir": "/Users/skilurus/github/flock-react-app",
"runTestsByPath": false,
"testFailureExitCode": 1,
"testPathPattern": "",
"testResultsProcessor": null,
"updateSnapshot": "new",
"useStderr": false,
"verbose": true,
"watch": false,
"watchman": true
},
"version": "22.3.0"
}
node --version: 8.9.4
npm --version: 5.6.0
yarn --version 1.3.2
Has anybody seen anything similiar? Does anybody know hot to fix this?
This happens to me too but it's intermittent, very frustrating though. I have discovered a workaround which is to run using the --runInBand flag, which just runs tests in the same thread:
jest --runInBand
Run you tests like so:
jest --detectOpenHandles --forceExit
--detectOpenHandles logs out errors preventing your tests from exiting clearly and it implies --runInBand which ensures your tests run in the same threads so no overlapping.
--forceExit which terminates your tests if something is wrong instead of hanging.
For the record, in my case it turned out to be a caching problem (I tried many many other things before).
For jest >=22.0.0 use the --clearCache option to clear the cache.
For jest <22.0.0 use the --showConfig option, search for the cacheDirectory property and delete the mentioned directory.
Hope this helps someone.
On MacOS uninstalling and reinstalling watchman didn't work for me.
Running watchman version hangs indefinitely.
do this to fix the watchman from hanging:
launchctl unload ~/Library/LaunchAgents/com.github.facebook.watchman.plist
watchman version
https://github.com/facebook/watchman/issues/381#issuecomment-257673900
You should see something like this then you know it worked:
{
"version": "2021.08.23.00"
}
Then re-run your jest tests
On MacOS I fixed this by uninstalling and reinstalling watchman using brew uninstall watchman and then reinstalling with brew install watchman. I had recently upgraded the OS so that may have something to do with it.
I had a similar issue. Most of my test where running but one suite was continuously running and never erroring.
It turned out I had a race condition in one of my useEffects. Which just cause jest to continuously run.
To diagnose the issue:
Comment out all test but one. keep adding a test till you find the one triggering the error.
Analyze the test to Identify which code is effected. (My issue turned out to be in a UseEffect.)
Identify which state object is causing the race condition.
Fix: remove it or throw a condition check on your code to prevent the race condition
In my case it was because I was using a jest plugin for VS code and auto save was enabled. So, jest hanged after running too many times.
Removing the /tmp/jest_rs solved my problem.
So I had a situation similar to this, only that jest refused to run any of my tests! The cause was a little convoluted:
I hadn't run the project in over 6 months and various dependencies had picked up vulnerability issues.
Back when I had last run the project and tests, I had jest installed globally with a global config.
Then at one point, I had uninstalled jest from global (hence losing the global config) but didn't remember to add a local one to the project I'm talking about.
When debugging to try and get the tests to run, I nuked my node modules and did a fresh install.
Only after adding a jest.config with setting the no cache options did it eventually work out.
In summary:
If you don't have jest installed globally, make sure to have a jest config for your project.
After using the cli to set up the config, go back and manually check all the options you've chosen are there and modify the ones cli didn't prompt for.
I had the same issue, tests pass and then it hangs and the CI hangs too. I stumbled upon --forceExit, and it fixed it for me.
Debug useEffect hook used inside components because some times useEffect creates infinite loop problems and the jest doesn't finishes the tests
I have fixed this by modifying my .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
[
"styled-jsx/babel",
{
// "plugins": ["styled-jsx-plugin-postcss"]
}
]
]
}
In my case I tried everything around internet and the only solution was to set isolatedModules: true (I explicitly set it to false).
In my case, updating nodejs from an older version (ie. 12.16.1) to something more recent (eg. 14.17.3) and then re-installing jest (npm install jest -g) resolved this completely.
I had something similar with the project on NestJS. It turned out that one of the modules contained an imported module, but it was not installed. And for some inexplicable reason, there was no information about this when the tests were launched.
check your tests, in my case I mistake and put an extra "a" on the test
test('test expected that ..', async (a) => {
...
this makes my test hang forever (using node 14.15 and jest 29.1.2).
The #rohit's answer has given me the clue to find the solution to my problem, my code was working fine, but jest was failing into an infinite loop with the useEffect
so I've solved making a mock of it
import React from 'react'
const mockUseEffect = jest.fn()
jest.spyOn(React, 'useEffect').mockImplementation(mockUseEffect)
you can adapt it as your needs

Resources