Install Jest (Angular 8-10) Tutorial

Video guide: https://www.youtube.com/watch?v=Dt8RtykEglo

Introduction:

By working through steps 1-7, you will be able to set up Jest in any Angular v8-v10 project. Step 8 is an optional clean-up step. If you would like to install a Jest/Karma hybrid, you can also leave karma.conf.js in, and rename test.ts to something like karmaTest.ts.

Steps:

1. Remove karma & jasmine stuff with npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter

2. Install npm install --save-dev jest jest-preset-angular @types/jest

3. Create setup-jest.ts to project root and add the following:

import 'jest-preset-angular';

4. Create jest.config.js in project root and add the following:

module.exports = {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
        "<rootDir>/setup-jest.ts"
    ],
    "transformIgnorePatterns": [
        "node_modules/(?!@ngrx|ngx-socket-io)" // List any packages here that error
    ],
    "transform": {
        "^.+\\.(ts|js|html)$": "ts-jest"
    },
    "testPathIgnorePatterns": [
        "<rootDir>/node_modules/",
        "<rootDir>/dist/",
        "<rootDir>/cypress/",
        "<rootDir>/src/test.ts",
    ]
};

5. Add the following types array to compilerOptions in tsconfig.json:

    "compilerOptions": {
        "types": [
            "jest"
        ]
    }

6. Replace jasmine with jest in types array of compilerOptions in tsconfig.spec.json:

"compilerOptions": {
    "types": [
        "jest",
        "node"
    ],
}

7. Add jest scripts to package.json:

"scripts": { 
    "test": "jest",
    "test-watch": "jest --watch"
}

8. (Optional) Remove karma.conf.js and test.ts rm ./karma.conf.js ./src/test.ts