Angular 8 与 Jest 使用路径

Question

I am trying to get Jest to work with my current project. I have followed this guide:

https://blog.angularindepth.com/angular-cli-ng-test-with-jest-in-3-minutes-v2-1060ddd7908d

When I run ng test all my tests fail with this error:

Cannot find module '@environments/environment' from 'data.service.ts'

I believe that is because it's using my custom paths defined in tsconfig.json , which looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
        "@assets/*": ["src/assets/*"],
        "@core": ["src/app/_core"],
        "@models": ["src/app/_core/models"],
        "@services": ["src/app/_core/services"],
        "@shared": ["src/app/_shared"],
        "@environments/*": ["src/environments/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

How can I get Jest to use the paths I have defined?

---

Update

I have found this document:

https://kulshekhar.github.io/ts-jest/user/config/#jest-preset

which seems to be the correct file. So I added a jest.config.js file to my project and did this:

module.exports = {
    //verbose: true,
    moduleNameMapper: {
        "^@assets/(.*)$": ["<rootdir>/src/assets/$1"],
        "^@environments/(.*)$": ["<rootdir>/src/environments/$1"],
        "^@core$": ["<rootdir>/src/app/_core"],
        "^@models$": ["<rootdir>/src/app/_core/models"],
        "^@services$": ["<rootdir>/src/app/_core/services"],
        "^@shared$": ["<rootdir>/src/app/_shared"]
    }
};

Which seems to have worked, but I am getting a new error now:

---

Update

Getting a bit closer. My jest.config.js was syntax wrong, i changed it to this:

module.exports = {
    //verbose: true,
    moduleNameMapper: {
        "^@assets/(.*)$": "<rootdir>/src/assets/$1",
        "^@environments/(.*)$": "<rootdir>/src/environments/$1",
        "^@core$": "<rootdir>/src/app/_core",
        "^@models$": "<rootdir>/src/app/_core/models",
        "^@services$": "<rootdir>/src/app/_core/services",
        "^@shared$": "<rootdir>/src/app/_shared"
    }
};

(I removed the array brackets) but now I am getting this error:

Configuration error:

Could not locate module @environments/environment mapped as:
<rootdir>/src/environments/environment.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^@environments\/(.*)$/": "<rootdir>/src/environments/$1"
  },
  "resolver": null
}

which should be a map of

"@environments/*": ["src/environments/*"]

I have checked and I am getting the same issue for all my mappings

---

So I have reverted to using this:

const {
    pathsToModuleNameMapper
} = require('ts-jest/utils');
const {
    compilerOptions
} = require('./tsconfig');

module.exports = {
    //verbose: true,
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
        prefix: '<rootDir>/'
    })
};

for the jest.config.js because it is less code and seems better than manually using regex. I also found this issue:

https://github.com/thymikee/jest-preset-angular/issues/288

which I have added to my tsconfig.spec.json and that has now started passing a lot of tests. But now I am getting the error I got above, but with more passing tests:

Answer 1

We used the ts-jest npm package and configured jest to use the tsconfig.spec.json (which inherits from tsconfig.json) in package.json like:

"jest": {
    "globals": {
        "ts-jest": {
            "tsConfig": "<rootDir>/src/tsconfig.spec.json",
        }
    }
}