Setup Angular, Jest, Storybook & Storyshots

Here is what is needed to run Jest , Storybook, and Storyshots with Angular 7.2.3.


package.json

{
  "name": "izoa-dashboard",
  "version": "0.0.0",
  "engines": {
    "node": "11.1.0",
    "npm": "6.4.1"
  },
  "scripts": {
    "ng": "ng",
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "start": "ng serve --open  --proxy-config proxy.conf.json",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --runInBand",
    "coverage": "ng test --no-watch --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/",
      "<rootDir>/src/test.ts",
      "<rootDir>/_tests/"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-preset-angular/build/AngularSnapshotSerializer.js",
      "<rootDir>/node_modules/jest-preset-angular/build/HTMLCommentSerializer.js"
    ],
    "globals": {
      "__TRANSFORM_HTML__": true,
      "ts-jest": {
        "tsConfig": "<rootDir>/src/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$",
        "astTransformers": [
          "<rootDir>/node_modules/jest-preset-angular/build/InlineFilesTransformer",
          "<rootDir>/node_modules/jest-preset-angular/build/StripStylesTransformer"
        ]
      }
    },
    "moduleNameMapper": {
      "jest-preset-angular/(.*)": "<rootDir>/node_modules/jest-preset-angular/build/$1"
    },
    "transform": {
      "^.+\\.(ts|html)$": "ts-jest",
      "^.+\\.js$": "babel-jest",
      "^.+\\.md?$": "markdown-loader-jest"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node",
      ".html"
    ],
    "coveragePathIgnorePatterns": [
      "/jest-config/",
      "/node_modules/"
    ],
    "coverageDirectory": "<rootDir>/_tests/coverage",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.ts"
    ],
    "coverageReporters": [
      "json",
      "html"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ]
  },
  "jest-junit": {
    "outputDirectory": "<rootDir>/_tests/junit",
    "usePathForSuiteName": "true"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.3",
    "@angular/cdk": "7.3.0",
    "@angular/common": "7.2.3",
    "@angular/compiler": "7.2.3",
    "@angular/core": "7.2.3",
    "@angular/flex-layout": "7.0.0-beta.24",
    "@angular/forms": "7.2.3",
    "@angular/http": "7.2.3",
    "@angular/material": "7.3.0",
    "@angular/platform-browser": "7.2.3",
    "@angular/platform-browser-dynamic": "7.2.3",
    "@angular/router": "7.2.3",
    "core-js": "2.6.3",
    "d3": "5.9.2",
    "hammerjs": "2.0.8",
    "jquery": "3.4.0",
    "jwt-decode": "2.2.0",
    "moment": "2.24.0",
    "moment-timezone": "0.5.27",
    "pi-common-lib": "0.0.4",
    "rxjs": "6.3.3",
    "save": "2.3.3",
    "systemjs": "0.21.4",
    "systemjs-plugin-babel": "0.0.25",
    "vis": "4.15.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "7.5.2",
    "@angular-devkit/build-angular": "0.13.8",
    "@angular-devkit/build-ng-packagr": "0.13.8",
    "@angular/cli": "7.3.8",
    "@angular/compiler-cli": "7.2.8",
    "@angular/language-service": "7.2.3",
    "@babel/core": "7.7.7",
    "@babel/preset-env": "7.8.4",
    "@babel/preset-typescript": "7.8.3",
    "@ngx-translate/core": "11.0.0",
    "@storybook/addon-actions": "5.3.14",
    "@storybook/addon-links": "5.3.14",
    "@storybook/addon-notes": "5.3.14",
    "@storybook/addon-storyshots": "5.3.14",
    "@storybook/addon-viewport": "5.3.14",
    "@storybook/addons": "5.3.14",
    "@storybook/angular": "5.3.14",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/jest": "25.1.2",
    "@types/lodash": "4.14.149",
    "@types/node": "8.9.4",
    "@types/vis": "4.21.8",
    "babel-loader": "8.0.6",
    "babel-plugin-macros": "2.8.0",
    "codelyzer": "4.5.0",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "jest": "25.1.0",
    "jest-junit": "10.0.0",
    "jest-preset-angular": "8.0.0",
    "markdown-loader-jest": "^0.1.1",
    "ng-mocks": "^9.0.0",
    "ng-packagr": "4.2.0",
    "node-sass": "4.12.0",
    "protractor": "5.4.0",
    "require-context.macro": "1.2.2",
    "terser-webpack-plugin": "1.2.2",
    "ts-jest": "25.2.1",
    "ts-node": "7.0.0",
    "tsickle": "0.34.0",
    "tslib": "1.9.0",
    "tslint": "5.11.0",
    "typescript": "3.2.4"
  }
}

setupjest.ts

import 'jest-preset-angular';
import 'hammerjs';

.babelrc

{
  "plugins": [
    "macros"
  ]
}

babel.config.js

module.exports = function(api) {
    process.env.NODE_ENV === "development" ? api.cache(false) : api.cache(true);
    const presets = [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
      '@babel/preset-typescript',
    ];
    const plugins = [];
    return {
      presets,
      plugins,
    };
  };

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "module": "commonjs",
    "allowJs": true,
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

.storybook/config.js

import { configure } from '@storybook/angular';
import requireContext from 'require-context.macro';



// Loads all files ending with ".stories.ts" in 'src/storybook' directory.
const req = requireContext('../src/storybook/stories/', true, /\.stories\.ts$/);
function loadStories() {
    req.keys().forEach(fileName => req(fileName));
}

configure(loadStories, module);

.storybook/addon.ts

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-viewport/register';