Angular Doesn't Recognize karma.conf.js - javascript

In a commercial project, tests have been running fine for some time. We cut a release in Angular 8. On master, we upgrade to Angular 9. Now the release needs a hotfix, so I check the branch out and run tests. This is all in the same repo / file system directory.
It fails like Angular core has no exported member ɵɵFactoryDef and I quickly determine that the error is due to CLI version incompatibility.
So I uninstall ng CLI globally and reinstall npm i -g #angular/cli#8.2.0, in line with the release branch package.json. Now the above error is gone, but when I try to ng test the CLI insists that karma.conf doesn't exist. The only issue is that, like, it totally does exist.
Other things I have tried:
rm -rf and npm i from scratch
npm cache verify
close and re-open terminals
restart computer
create a new karma.conf with a different name and point angular.json to that
ng cli does respect angular.json in that the below error will change depending on my karma file name and path, but it still continues to insist, on MacOS, that the below file doesn't exist:
On Mac, I still get:
ERROR [config]: File /Users/<various paths that totally exist>/src/karma.<tried different things here>.js does not exist!
Any ideas? Thanks!!
--- Edit: adding some technical info below per request.
test block from angular.json:
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"codeCoverage": true,
"karmaConfig": "src/karma.conf.js",
"scripts": ["node_modules/jquery/dist/jquery.js", "node_modules/jquery-mockjax/dist/jquery.mockjax.js"],
"assets": [
"src/favicon.ico",
{
"glob": "**/*.html",
"input": "./src/legacy",
"output": "./"
}
]
}
}
Partial client folder structure. Notice that storybook/ and test/ are siblings of src/, and angular.json is one level above `src/. I have already tried some karma path mutations including:
"karmaConfig": "./src/karma.conf.js",
"karmaConfig": "../../<correct folders>src/karma.conf.js",
"karmaConfig": "src/karma.<change this>.js",

You might have gone through this check already but have you tried updating your package.json to have the path of karma.conf like so...?
"scripts": {
"test": "karma start ./path_to_karma.conf.js"
}

This ended up solving it for me, after steps mentioned in the question:
Delete the entire repo
Re-clone (actually, I did a shallow clone git clone <repo-url>.git --branch <ng8-branch> --depth 5
Install again npm i
Now ng test works as expected.

Related

Prevent nodemon from restarting due to changes to a json-file

I have a nodemon server running, but if I change a file with fs.writeFileSync nodemon restarts and the json-file loses its data.
I tried to prevent this by putting a ignore in the package.json
"nodemonConfig": {
"ignore": ["*.json"]
}
This is not working. I think it could be because I installed nodemon global. Then I found another possibility to prevent this by creating a nodemon.json with:
{
"ignore": ["*.json"]
}
but this is also not working. The third possibility was to write:
nodemon --ignore '[users.json]'
in the terminal. It could be that I wrote the line wrong or something else, but I am just not getting the solution for this problem.
You can add nodemon configuration within the package.json file, for example:
{
"name": "label",
"version": "0.0.1",
"nodemonConfig": {
"ignore": ["*.json", "public/javascripts/*.js"]
},
"author": "#aqui",
"license": "GPL-3.0"
}
The key must be nodemonConfig. Ignore rules can be specified as an array of globs or complete filenames
Or you can edit your package.json file to update the run scripts this way.
"scripts": {
"dev": "nodemon server.js --ignore *.json"
},

Exclude the reference library project folder in LINT with angular 10

I am trying to exclude the reference library project files while running the command npm run lint, but it is not working for me.
In the main application, I have added these code in the angular.json
Angular.json
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/pts-ngx/core/tsconfig.lib.json",
"projects/pts-ngx/core/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"**/projects/ors-testtaker-bff/**"
]
}
}
I have the below file structure and trying to exclude the files inside API and MODEL folder
Followed the instruction from below
How to exclude all files under a directory in lint using angular CLI?
This help me
From tslint v5.8.0 you can now ignore files from your tslint.json file. Just add this to your toplevel tslint.json file:
"linterOptions": {
"exclude": ["projects/ors-testtaker-bff/api/**/*","projects/ors-testtaker-bff/model/**/*"]
}

Setting up Electron with React Typescript CRA

_____ Project description _____
I started my Typescript & React project as a web app and I am currently in the process of converting that fully to an Electron app. I am having some trouble with this though.
_____ Where I am currently at _____
I followed this tutorial to get Electron to work. It works fine, other than that the electron.js file (in the tutorial called main.js, I placed it in my src folder, not the public folder) is a javascript file. This does not hinder my application from running, but I'd prefer having it in Typescript format. That is what I am stuck on. I converted it to a Typescript file, but I can't point to that from my package.json config.
_____ Problem Description _____
From my understanding, the main property in package.json needs to point to this electron.ts file. But of course, the file does not get processed correctly because it is not a javascript file.
_____ Question _____
How can I somehow point to the electron.ts file? Where does the transpiled code, generated on runtime, reside? Perhaps I could point the main property to there?
_____ package.json _____
...,
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build -- em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"main": "src/electron.ts",
"homepage": "./",
"build": {
"appId": "com.example.electron-cra",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
...
I made a boiler plate starter pack which contains many applied bug fixes that I had to face when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.
https://github.com/nateshmbhat/electron-react-ts-starter/
It works fine with Create react app and no need of ejecting it .
The fastest route that I found to getting typescript up and running was with electron-webpack.
With the add-ons, it's got your requirements covered. I've used this to great success for an electron-react-redux application.

Run Jest tests only for current folder

I have Jest installed on my machine and typing jest from terminal results in tests from parent folers also getting executed. I want to run tests only from the current folder.
For e.g. if I go to c:/dev/app in terminal and type some-jest-command, it should only run files with .test.js present in the app folder. Currently, running jest command from app folder runs tests in parent folders too, which is not my desired behaviour.
By default, Jest will try to recursively test everything from whatever folder package.json is located.
Let's say you're in c:/dev/app, and your package.json is in c:. If your basic command to invoke Jest is npm test, then try with run npm test dev/app.
If you want to run the tests from a specific folder user the --testPathPattern jest flag. When setting up the npm script add the path to the folder as well. In your package.json add the flag in you npm scripts. Check the bellow code for an example.
"scripts": {
....
"test:unit": "jest --testPathPattern=src/js/tests/unit-tests",
"test:integration": "jest --testPathPattern=src/js/tests/integration"
....
},
If you want to watch as well for changes, use the watch flag:
{
...
"test:unit": "jest --watch --testPathPattern=src/js/tests/unit-tests",
...
}
After that open, the command line, change the directory where your project is and run the unit test.
npm run test:unit
or integration tests.
npm run test:integration
To only run testing in a specific directory and to coerce Jest to read only certain type of files(my example: 'ExampleComponent.test.js' with new Jest version #24.9.0 you must write exact "testMatch" in jest.config.json || package.json in "jest" part next "testMatch": [ "<rootDir>/src/__tests__/**/*.test.js" ],
This testMatch in my case hits all files with the prefix .test.js in tests/subdirectories/ and skips all other files like 'setupTest.js' and other .js files in 'mocks' subdirectory which is placed inside of 'tests' directory,so,my 'jest.config.json' looks like this
{
"setupFiles": [
"raf/polyfill",
"<rootDir>/setupTests.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleNameMapper": {
"^.+\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"testMatch": [
"<rootDir>/src/__tests__/**/*.test.js"
]
}
Just adapt to your needs 'testMatch' regex.
A little note: This is for jest#24.9.0 && enzyme#3.10.0 if it matters to anyone.
I hope it will be useful to someone, cheers all.
--package.json
"scripts": {
"test": "jest"
}
--jest.config.js
module.exports = {
"testMatch": [
"<rootDir>/tests/unit/*.test.js"
]
}
From the root of your project, you can run jest <substring of files> and it will only run the test files which have the substring you added.
$ jest /libs/components
> [PASS] /libs/components/button.tsx
yarn:
yarn test nameoffolder
npm:
npm test nameoffolder
For example, if you have a folder named widget and you only want to run the tests in the widget folder you would run this command.
yarn:
yarn test widget
npm:
npm test widget

NPM installing modules to application root

I messed something up and I've done my best to fix it, but no luck.
Whenever I run 'npm install' on a new node project, it installs all of my dependencies to the root of the application instead of in /node_modules/ like you'd expect in a default application.
For example-
My package.json
{
"name": "hello-world",
"description": "hello world test app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.x"
}
}
When I use 'npm install' I end up with this:
I've tried setting my PATH like in this solution:
How to use package installed locally in node_modules?
but that didn't seem to do much. Help?
observe that you have the cache variable set in that directory
strict-ssl = false
userconfig = /private/tmp/timothy/timothy_local_job_1367532952281_60137/.npmcfg
cache = /Users/tomhorton/Documents/Repository/helpmestackoverflow
root = ./node_modules
That timothy stuff is from a module that I installed shortly before everything went haywire-
I removed that stuff and the defaults took over. Everything works great!

Categories