Resolve alias in dependecy monorepo package

[draftitchris]

💬 Questions and Help

Right now we are developing a react application that makes use of a monorepo using yarn workspaces and typescript paths.

I have two packages both whom have jest tests. Package A depends on Package B and B is independent.

Running tests on package B (a component library) is no problems and within package B I have typescript aliases aka compilerOptions.paths. Jest has no problems handling these with moduleNameMapper.

However the issue arises when I try to run jest tests on Package A which imports components from Package B. When the component in B is imported it has its own local dependencies and jest seems unable to resolve Package B alias mappings when running tests in A.

Example:

Root jest.config.js:

module.exports = {
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.tsx?$",
  roots: ['<rootDir>/tests'],
  moduleNameMapper: {
    "@someAlias/(.+)$": "<rootDir>../src/$1",
    "@foo/packageB(.*)$": "<rootDir>/../packageB/src/$1",
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

Package B.

./packages/packageB/src/components/Component1.tsx

export const Component1 = () => <div>helloWorld </div>

src/components/Component2.tsx

import Component1 from '@someAlias/components'
export const Component2 = () => <div><Component1/></div>

./packages/packageB/jest.config.js

module.exports = {
  ...baseConfig,
  displayName: 'packageB',
  moduleNameMapper: {
    ...baseConfig.moduleNameMapper,
  },
  rootDir: './'
};

Running tests for Package B is NO PROBLEMS :D

Package A

./packages/packageA/src/components/Component1.tsx

import {Component2} from '@foo/packageB'
export const Component1 = () => <div><Component2/></div>

./packages/packageA/jest.config.js

module.exports = {
  ...baseConfig,
  displayName: 'packageA',
  moduleNameMapper: {
    ...baseConfig.moduleNameMapper,
  },
  rootDir: './'
};

When running tests from here I get an error

 ● Test suite failed to run

  TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
  ../packageB/src/components/Component2/Component2.tsx:5:26 - error TS2307: Cannot find module '@someAlias/components'.

  5 import { ListItem } from '@someAlias/components';

So it appears as though jest is not able to resolve module name aliases outside of its own rootDirectory. If this is the case, is there a canonical way of resolving this issue? How do i get a dependency packages own aliases to resolve in order to run my tests?

Please note that this issue tracker is not a help forum and this issue will be closed.

For questions or help please see:

• The Jest help page
• Our discord channel in Reactiflux
• The jestjs tag on StackOverflow

[thymikee]

Remove roots: ['<rootDir>/tests'] from your config. roots tells Jest where to find tests and files.

[thymikee]

Also in your root config, if you want other configs to apply, you need to use projects option: https://jestjs.io/docs/en/configuration#projects-array-string-projectconfig.

You'll also need to change the rootDir to point to your root config if you use projects.

I think that all should help.

[draftitchris]

Ah I swear I read the documentation a 1000 times about roots. I didn't realize it affected what files would be imported. Thought it was just relevant for the test files.

Ive tried configuring with projects and the rootDir pointing to my root directory and to be honest its been kind of a nightmare. Have experimented a lot to try and get things right.

Im not really sure as to how to configure this. As far as I understand it if I have several jest.configs listed in my projects field it will run separate so called "runners" for each config. Yet they don't seem to be read properly as none of them are finding they're local respective tsconfig files and none of the module mappings work.

My config for packageB now looks like this:

const baseConfig = require("../../../jest.base");

module.exports = {
  ...baseConfig,
  displayName: 'packageB',
  rootDir: '../../../',
  globals: {
    'ts-jest': {
      tsConfig: './tsconfig.json'
    }
  },
  setupFilesAfterEnv: ['@testing-library/react/cleanup-after-each'],
  snapshotSerializers: ['jest-emotion']
};

Have also tried setting my .tsconfig path to an absolute path with rootDir to no avail

my root jest.base looks like this:

module.exports = {
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleNameMapper: {
    "@someAlias(.*)$": "<rootDir>packages/packageB/src$1",
    "@foo/packageA(.*)$": "<rootDir>packages/packageA/src/$1",
    "@foo/packageB(.*)$": "<rootDir>packages/packageB/src/$1"
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

And finally my root jest.config:

module.exports = {
  projects: ['<rootDir>/packages/packageA/jest/jest.config.js', '<rootDir>/packages/packageB/jest/jest.config.js'],
};

If I run jest from the root I just get bombarded by jsx flag issues and all of the module imports not finding their modules. If I run from packageB all of my tests will however pass (not weird I guess), and it also runs the failing packageA test now (I guess because the rootDir is set for the whole monorepo?)... which still fails regardless of what I've done I've never got this test to pass.

Does the projects field not allow importing of other jest.config files or something? The errors I get from jest say so little about the problem. Where am I going wrong??

[thymikee]

-<rootDir>packages
+<rootDir>/packages

[draftitchris]

Man your response time is amazing and soo appreaciated. The change made no difference. Ill see if I can't get an example repo up for an example.

[thymikee]

Sure! We are aware that setting up Jest projects is quite cumbersome at times, but it should eventually work. We'd also like to re-think this setup to be more intuitive (because it definitely isn't right now).

[draftitchris]

Ok I have create an example repo here

Illustrates the issues im having.

[thymikee]

I'd say it's an issue with ts-jest. If I turn off diagnostics, tests pass:

diff --git a/packages/foo-packagea/jest.config.js b/packages/foo-packagea/jest.config.js
index ae89670..ee34fcf 100644
--- a/packages/foo-packagea/jest.config.js
+++ b/packages/foo-packagea/jest.config.js
@@ -6,7 +6,8 @@ module.exports = {
   rootDir: '../../',
   globals: {
     'ts-jest': {
-      tsConfig: '<rootDir>/packages/foo-packagea/tsconfig.json'
+      tsConfig: '<rootDir>/packages/foo-packagea/tsconfig.json',
+      diagnostics: false
     }
   },
   modulePathIgnorePatterns: [
diff --git a/packages/foo-packageb/jest.config.js b/packages/foo-packageb/jest.config.js
index 42e4135..9f4325e 100644
--- a/packages/foo-packageb/jest.config.js
+++ b/packages/foo-packageb/jest.config.js
@@ -6,7 +6,8 @@ module.exports = {
   rootDir: '../../',
   globals: {
     'ts-jest': {
-      tsConfig: '<rootDir>/packages/foo-packageb/tsconfig.json'
+      tsConfig: '<rootDir>/packages/foo-packageb/tsconfig.json',
+      diagnostics: false
     }
   },
   modulePathIgnorePatterns: [

I'd consider disabling diagnostics and file an issue there :)

[cygnichris]

Thats super interesting! I've been digging and playing around with it the whole time as well. I also got onto the the ts-loader scent and started logging out what ts-loaders pathsToModuleNameMapper mapped my tsconfig paths to. Using this I was able to write the correct regex that satisfied jest as far as module mapping goes.

I pushed my changes to the repo now and all tests pass as is. I basically hoist any needed shared mapped modules to my base config and keep the internal modules local to the package. I also added roots to each of the packages to stop the tests from running 2 or more times for each config I add to jest.configs projects.

Looking forward to improving the documentation so that someone else doesn't have to go through the same journey. But I think if I can find time ill try and open an issue with ts-jest as well.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.