03.1 getting started jest - ranhs/soda-test GitHub Wiki

How to Set up Angular Unit-Testing with Jest

When starting a new Angular aplication, the Angular CLI sets up everything you need to unit testing using Karma and Jasmine.
If you prefere using Jest as your unit testing framework, you should follow the follwing steps:

  1. Install the needed dependencies 
    npm install jest jest-preset-angular @types/jest -D
  2. Create the jest.config.js file at the root of your project 
    const { pathsToModuleNameMapper } = require('ts-jest')
const { compilerOptions } = require('./tsconfig')

module.exports = {
    preset: 'jest-preset-angular',
    roots: ['./src'],
    testMatch: ['demo.spec.ts', '**/+(*.)+(spec).+(ts)'],
    setupFilesAfterEnv: ['./src/test.ts'],
    collectCoverage: true,
    verbose: true,
    coverageReporters: ['html'],
    coverageDirectory: '../coverage-ut/front-end',
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
        prefix: './'
    })
}
  3. Replace the content of the src/test.ts file with the following: 
    import 'jest-preset-angular'

Object.defineProperty(window, 'CSS', {value: null})
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    }
  }
})

Object.defineProperty(document, 'doctype', {
  value: '<!DOCType html>'
})

Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    }
  }
})
  4. Create the the file tsconfig.spec.json with the following content: 
    {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/spec",
      "types": [
        "jest",
        "node"
      ],
      "esModuleInterop": true,
      "emitDecoratorMetadata": true
    },
    "files": [
      "src/test.ts",
      "src/polyfills.ts"
    ],
    "include": [
      "src/**/*.spec.ts",
      "src/**/*.d.ts"
    ]
}
  5. Update the content of the tsconfig.json file: 
    {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}
  6. The command to run the tests is 
    npx jest

    However we want to run those tests using soda-test, so we do something a little differnt

h2>Installation of soda-test

In order to write unit tests using soda-test you need to install it using the command:

npm install soda-test --save-dev

configuration

To run jest tests using soda-test package, you need to add in package.json in the scripts section the "test" script for running the tests, using soda-test jest starter. 

{
   ...
   "scripts": {
        "test": "node node_modules/soda-test/jest.js"
        ...
    }
    ...
}

Remove Karma

Since we are not using Karma in this option, we need to remove the default setting of it Angular has created:

  1. Remove Karma dependencies 
    npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
  2. Remove the test target inside the angular.json file
    {
   ...
   "projects": {
      "my-app": {
         ...
         "architect": {
            ...
            "test": {...},
            "test": "remove the 'test' entry",
            ...
         }
      }
   }
   ...
}

For more information about getting started with soda-test see the general Getting started page
For more information about using jest in Angular projects see the internet artical How to Set Up Angular Unit Testing with Jest
⚠️ **GitHub.com Fallback** ⚠️