Stencil: Paths aliases are ignored in unit tests (*.spec.ts)

[RafaelKr]

Stencil version:

@stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I have set a path alias in my tsconfig.json, which is ignored when running npm run test with the following error:
Cannot find module '@/helpers/fragment' from 'app-home.tsx'

This is related to Issue https://github.com/ionic-team/stencil/issues/444

Expected behavior:
The paths from the root tsconfig.json should be taken into account.
Angular does this with the file src/tsconfig.spec.json which uses "extends": "../tsconfig.json",

Steps to reproduce:
See https://github.com/RafaelKr/stencil-tsconfig-paths-repro and https://github.com/ionic-team/stencil/issues/1307#issuecomment-574562626 for further details.

[RafaelKr]

I found a workaround using the tsconfig-paths-jest module for now.

Following steps are required:

1. Add "resolveJsonModule": true, to the compilerOptions in tsconfig.json
2. npm i -D tsconfig-paths-jest
3. Update stencil.config.ts:

[...]

import tsconfigPathsJest from 'tsconfig-paths-jest'
import tsconfig from './tsconfig.json'

// https://stenciljs.com/docs/config

export const config: Config = {
  [...]
  testing: {
    moduleNameMapper: tsconfigPathsJest(tsconfig),
  },
}

Sidenote: The module `tsconfig-paths-jest does not support a definition that has multiple paths:

"paths": {
  "@app/*": ["src/*", "src/app/*"]
}

https://www.npmjs.com/package/tsconfig-paths-jest#limitation

[AThiyagarajan]

I am also running in to the same issue.

@RafaelKr Is it worth trying ts-jest for this?

[RafaelKr]

It works without problems for me. So it's worth for me and pretty easy to setup.

[FortinFred]

I've found another workaround which also works with the VS Code jest extension (orta.vscode-jest).

Given the following tsconfig paths config

    "paths": {
      "~/*": ["./src/*"]
    },

1- Create a jest.config.js file

const preset = require('@stencil/core/testing/jest-preset')

module.exports = {
  ...preset,  // We need to keep Stencil's config (Mostly for VS Code Jest extension)
  moduleNameMapper: {
    ...preset.moduleNameMapper,  // We need to include Stencil's mappers
    "^~/(.*)$": "<rootDir>/src/$1",  // same as tsconfig
  }
};

2- Modify your stencil.config.ts to add the testing prop

import jestConfig from './jest.config';
export const config: Config = {
  ...
  testing: {
    ...jestConfig
  }
}

Voila!

Just make sure to keep tsconfig.paths and js-config.moduleNameMapper in sync

[adamdbradley]

This should be fixed in the latest version. If it's still a problem, would you be able to create an issue with a thorough description on how to replicate this? Thanks

[FortinFred]

@adamdbradley IMHO The current issue seems to outlined quite clearly how to replicate the issue...

[RafaelKr]

@adamdbradley Do you mean v1.9.0-12? It's not published to npm yet.

It's still not working for v1.9.0-11. If it should be working there I would like to keep it in this issue.

I created a reproduction: https://github.com/RafaelKr/stencil-tsconfig-paths-repro

Steps to create own reproduction:

1. npm init stencil
2. npm i @stencil/core@next (or npm i @stencil/[email protected])
3. Add the following to your tsconfig.json:

{
  "compilerOptions": {
    ...
+   "baseUrl": "./",
+   "paths": {
+     "~/*": [
+       "src/*"
+     ]
+   }
  },
  ...
}

1. Create file src/tsconfig-paths-test.ts with the following content:
   export const tsConfigPathsAliasWorksText = 'The tsconfig path alias is working!'

2. Import that file in src/components/app-home.tsx, src/components/app-home.e2e.ts and src/components/app-home.spec.ts.

import { tsConfigPathsAliasWorksText } from '~/tsconfig-paths-test'
console.log(tsConfigPathsAliasWorksText)

1. Now I tried to run npm test and got an error:

> [email protected] test /home/rafael/coding/private/stencil/stencil-tsconfig-paths-repro
> stencil test --spec --e2e


[ ERROR ]  Cannot find module 'chalk' Require stack: -
           /home/rafael/coding/private/stencil/stencil-tsconfig-paths-repro/node_modules/@stencil/core/testing/index.js

[...]

Should I create another issue for that?
I fixed it by running npm i -D chalk

1. Run npm test again. Now it should throw the error

...
Cannot find module '~/tsconfig-paths-test' from 'app-home.e2e.ts'
...
Cannot find module '~/tsconfig-paths-test' from 'app-home.tsx'
...

When running npm start it works without any problems.