How to introduce Jest into an existing Angular project
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
Since I got interested in unit test of Jest since I got a presentation at bitbank LT Night the other day, I tried Jest. As I saw the situation and saw this, I will summarize the procedure as a reminder. I will summarize the procedure I went through.
Here and there that I referred to are as follows.
Itng add @briebug/jest-schematic can be introduced even by using jest-schematic , but in my case I did not want to erase jasmine so I used this method.
1. Install necessary packages
npm i -D @types/jest jest jest-preset-angular
2. Modification of package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint",
"e2e": "ng e2e",
"test": "jest",
"test: watch": "jest - watch"
},
"jest": {
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": " /src/jest.ts"
}
In my case I added test: watch and jest less than test. Since setupTestFrameworkScriptFile is just writing the place of the file to be created after this, if you want to place it in a different location, edit it accordingly.
3. Create jest.ts
import 'jest-preset-angular';
import './jest-global-mocks';
I will make jest.ts with the above contents. Any file name can be used as long as it is the same as specified by 2. This time I will make it to jest.ts.
4. Create jest-global-mocks.ts
Since it is all right as long as you copy an official example except when you want to touch special content here, I will bring in the contents of jestGlobalMocks.ts in the @ jest- preset -angular repository that I installed first . Especially in the same directory as jest.ts unless you touch the setting.
5. Edit tsconfig.spec.json
(Probably in most cases) Since tsconfig.spec.json already exists, you only need to rewrite its contents.
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es 5",
"types": [
"jest",
"node"
]
},
"include": [
"** / *. spec.ts",
"** / *. d.ts"
]
I think I changed the type jasmine to jest. I can not find tsconfig.spec.json! If it is said to be below the "jest" of package.json as in the @ jest-preset-angular README's Exposed Configuration
"globals": {
"ts-jest": {
"tsConfigFile": "src / tsconfig.spec.json"
},
"__TRANSFORM_HTML__": true
},
It is okay to add and add tsConfigFile to the actual path. I think that it is good to refer here also when you want to touch other settings.
npm testBy doing this, you should be able to run jest.
6. Edit angular.json
In my case, when I pushed the changes after this I had to edit angular.json because the pipeline failed because "ng test" got mocked.
"projects"> "project-name " of angular.json> "architect"> "test "> "builder" is in default because it is the will rewritten.
After running "ng test" after confirmation, there is no place ! It was said that it was said . With this, Jest will be able to run even in "ng test", and the installation is successfully completed!
You can run crisp and test
@angular-devkit/build-angular:karma
"builder": "@angular-builders/jest:run"
@angular-buildersnpm i -D @angular-builders
I was studying translation and interpreting at the university, but I am fascinated by the pleasure of front-making manufacturing since I started studying Angular since I got a job. For a while I would like to learn a lot to improve interpreter skills, translation skills and engineering skills. Thank you for your consideration.