NX Workspace with Jest implementation

[joelmuskwe]

How can you configure Jest with NX Workspace and remove jasmine and karma configs

[sixtoad]

First install jest-preset-angular:
yarn i --dev jest jest-preset-angular

create a tsconfig.spec.json in root with content:

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

add jest.config.json at same level with:

{
  "globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig.spec.json"
    }
  },
  "preset": "jest-preset-angular",
  "roots": [
    "<rootDir>/apps/",
    "<rootDir>/libs/"
  ],
  "collectCoverage":true
  ,
  "collectCoverageFrom": [
    "**/*.{ts}",
    "!**/node_modules/**",
    "!**/vendor/**",
    "!jestGlobalMocks.ts",
    "!setupJest.ts",
    "!**/test.ts",
    "!**/index.ts"
  ],
  "setupFiles": [
    "whatwg-fetch",
    "jest-localstorage-mock"
  ],
  "setupTestFrameworkScriptFile": "./setupJest.ts"
}

add jestGlobalMocks.ts with:

const mock = () => {
    let storage = {};
    return {
      getItem: key => key in storage ? storage[key] : null,
      setItem: (key, value) => storage[key] = value || '',
      removeItem: key => delete storage[key],
      clear: () => storage = {},
    };
  };

  Object.defineProperty(window, 'localStorage', {value: mock()});
  Object.defineProperty(window, 'sessionStorage', {value: mock()});
  Object.defineProperty(window, 'getComputedStyle', {
    value: () => ['-webkit-appearance']
  });

if you want to use whatwg-fetch and jest-localstorage-mock you should install them too (if not, just remove them from the previous scripts and leave jestGlobalMocks empty).

add setupJest.ts with:

import 'jest-preset-angular';
import './jestGlobalMocks'; // browser mocks globally available for every test

modify package.json scripts with:

"test": "jest --config jest.config.json",
"test:watch": "jest --config jest.config.json --watch",

[jschwarty]

Thank you for the answer @sixtoad !

[sixtoad]

@jschwarty , just discovered that there is a problem with HTML, the global config overwrite fully jest-preset-angular, so you need to add "TRANSFORM_HTML": true in:

"globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig.spec.json"
    }
  }

so it will be:

"globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  }

in jest.config.json

[darronj]

Great answer, many thanks, but has anyone got any guidance to share on getting it to work with nx 6? It can't find my projects in libs folder. It works well from Karma, but on any spec that imports from a lib folder I get the following: Cannot find module '@mylibs/mylib' from 'somespec.ts'

[4kochi]

Depending on how you import the files from your lib you maybe have to setup the module name mapping in jest configuration. Since jest does not understand the path mappings in the tsconfig this is the way to do it.

https://github.com/thymikee/jest-preset-angular#absolute-imports

[Nxt3]

@darronj Could you share how you set this up with nrwl 6?

[darronj]

Unfortunately I never got it to work. I still have the branch ready if anyone has any good ideas though.

[Nxt3]

@jschwarty I think this issue should be reopened.

Additionally with jest, I don't believe there would be a way to run tests on a per-project basis with nrwl 6. I could be mistaken though.

[frgul006]

You might be able to use affected:apps to generate a filter for jest but that feels... hacky.

[Nxt3]

@darronj I've actually figured it out. I'll make a post on Medium about it soon since I too couldn't find any info on this (this week, I promise). It wasn't too difficult. :)

[ThomasBurleson]

@Nxt3 - we should add an Nx Schematic to support the add-jest feature. Can you open/create a feature request for this; perhaps link to your blog or details?

[Nxt3]

@ThomasBurleson I couldn't agree more. When I get around to writing the (brief) article, I'll open a feature request for it. 👍 I gotta make sure I remember everything I did lol

[Nxt3]

Issue #623 has the necessary info.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.