just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.15k stars 198 forks source link

jest: doesn't seem to work with compilerOptions.paths option #34

Closed DmitryEfimenko closed 6 years ago

DmitryEfimenko commented 6 years ago

According to this article, I have the following In my tsconfig.json: projects/core/tsconfig.spec.json

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

tsconfig.spec.json // notice the paths

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": ["jest"],
    "lib": [
      "es2017",
      "esnext.asynciterable",
      "dom"
    ],
    "paths": {
      "@pwa/*": ["projects/pwa/src/app/*"],
      "@mobile/*": ["projects/mobile/src/app/*"],
      "@core/*": ["projects/core/src/*"],
      "@auth/*": ["projects/auth/src/*"]
    }
  }
}

the .spec file has an import like this:

import { something } from '@core/some.service';

This results in an error:

Cannot find module '@core/some.service' from 'some.service.spec.ts'

just-jeb commented 6 years ago

Yep, this is actually Jest's problem. It doesn't read the tsconfig.json neither does ts-jest. In fact, jest uses a bit different syntax for mappings. Check out this example, you have to add your mappings to your jest config under moduleNameMapper.

DmitryEfimenko commented 6 years ago

Could we automate this? Have the builder to look at tsconfig.json and convert these into jest syntax and put them where they need to be?

just-jeb commented 6 years ago

I had such a thought but it seems pretty time consuming (translating tsconfig regex syntax to jest regex syntax is not a trivial thing). Also, I would say that the right place to do that is in ts-jest as it is a general feature not necessarily related to Angular.
But you feel like implementing such a functionality here I would gladly accept a PR.

DmitryEfimenko commented 6 years ago

You're probably right. ts-jest would be a better place for this. However, they closed a similar issue: https://github.com/kulshekhar/ts-jest/issues/364

just-jeb commented 6 years ago

So shall I close this or you are up to the challenge?

DmitryEfimenko commented 6 years ago

It does not seem like they are inclined to have this change. Though it does make sense to be automated for angular build. I'll give it a shot. Before I dig into the code, can you point me to a file you think I'll be changing? Where does this jest config go?

just-jeb commented 6 years ago

The builder itself is here. However it does make sense to create a new class for this (like tsconfig-regex-translator or something like that). Maybe even two classes - regex-translator that will be translating a single tsconfig regex to jest regex and another one tsconfig-paths-converter which will be receiving a path to tsconfig and return jest modules mappings object. This way it will be easier to unit test this functionality and integrating it to any existing builder will be a piece of cake.

just-jeb commented 6 years ago

Update: After the refactoring the right file for integration would be default-config.resolver.ts. The rest remains as suggested (two classes to handle the logic).

just-jeb commented 6 years ago

Not angular-builders issue