Module '@foo' cannot be located within the ts-jest setup in a monorepository

Question

Module '@foo' cannot be located within the ts-jest setup in a monorepository

My monorepo is set up with TypeScript, WebPack, and ts-jest. The build process is successful, but I'm running into issues with unit testing in the ./demo sub-project due to the error:

Cannot find module '@mlhaufe/graphics/adapters' or its corresponding type declarations.

<root>/tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./packages",
        "paths": {
            "@mlhaufe/graphics/*": [
                "lib/src/*"
            ]
        }
    },
    "references": [
        {
            "path": "./packages/lib"
        },
        {
            "path": "./packages/demo"
        }
    ],
    "files": [],
    "exclude": [
        "node_modules"
    ]
}

<root>/packages/demo/tsconfig.json

{
   ...
    "references": [
        {
            "path": "../lib"
        }
    ]

<root>/jest.config.mjs

import fs from 'fs';
import path from 'path';
import url from 'url';
import { pathsToModuleNameMapper } from 'ts-jest';
import tsconfig from './tsconfig.json' assert { type: 'json' };

const { compilerOptions } = tsconfig,
    __filename = url.fileURLToPath(import.meta.url),
    __dirname = path.dirname(__filename),
    packageNames = fs.readdirSync(path.resolve(__dirname, './packages'));

/** @type {import('jest').Config} */
export default {
    rootDir: compilerOptions.baseUrl,
    verbose: true,
    testPathIgnorePatterns: [
        '<rootDir>/node_modules/',
    ],
    reporters: [
        'default',
        ['jest-junit', { outputDirectory: './coverage' }]
    ],
    // <https://jestjs.io/docs/next/configuration#projects-arraystring--projectconfig>
    projects: packageNames.map((name) => ({
        displayName: name,
        transform: {
            '^.+\\.mts$': ['ts-jest', { useESM: true }]
        },
        moduleFileExtensions: ['js', 'mjs', 'mts'],
        roots: [`<rootDir>`],
        modulePaths: [compilerOptions.baseUrl],
        // required due to ts-jest limitation
        // <https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/#support-mts-extension>
        resolver: '<rootDir>/mjs-resolver.ts',
        // Used the path aliases in tsconfig.json
        moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
            prefix: '<rootDir>',
            useESM: true
        }),
        // moduleNameMapper: {
        //     '@mlhaufe/graphics/(.+)': '<rootDir>/packages/lib/src',
        //     '^(\\.\\.?/.*)\\.mjs$': ['$1.mts', '$0']
        // },
        testMatch: [`<rootDir>/packages/${name}/**/*.test.mts`],
        testPathIgnorePatterns: [`<rootDir>/packages/${name}/dist/`]
    }))
};

<root>/package.json

{
    ...
    "workspaces": [
        "packages/*"
    ],
    "engines": {
        "node": ">=16.0.0"
    ],
    "scripts": {
        "build": "npm run build --workspaces",
        "build:lib": "npm run build --workspace=packages/lib",
        "build:demo": "npm run build --workspace=packages/demo",
        "test": "jest --coverage",
        "test:lib": "jest --selectProjects=lib --coverage",
        "test:demo": "jest --selectProjects=demo --coverage",
        "serve:demo": "npm run serve --workspace=packages/demo"
    },
    ...
}

I'm facing an issue where ts-jest is unable to locate the module, even though webpack and TypeScript are functioning correctly. I'm struggling to understand the relationship between the settings outside of the projects property and those within. I initially thought they would be global and apply to all projects, but it seems that's not the case.

Any insights on this matter would be greatly appreciated. I haven't come across a consistent (and modern) resource detailing how to tackle this challenge.

typescript jestjs es6-modules ts-jest monorepo

Answer 1

Answer №1

After analyzing the issue, it appears that jest is resolving the local modules within a monorepo without transpiling them beforehand. The solution provided in this response is more of a workaround rather than a definitive fix.

My approach involves adjusting the import path to be recognized as a path import instead of an external package.

Here is a snippet from my jest.config.ts file:

const config: Config = {
  preset: 'ts-jest/presets/js-with-ts-esm',
  resolver: '<rootDir>/jest.resolve.cjs',
  // additional configuration details omitted for brevity
}

export default config

The contents of the jest.resolve.cjs file are as follows:

const fs = require('node:fs')
const path = require('node:path')
const resolver = require('ts-jest-resolver')

const localModules = new Map(
  fs.readdirSync(path.join(__dirname, 'packages'), { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory())
    .map((dirent) => {
      const directory = path.join(__dirname, 'packages', dirent.name)
      const pkg = require(path.join(directory, 'package.json'))
      const main = path.join(directory, pkg.main)

      return [pkg.name, main]
    }),
)

/**
 * @param {string} path
 * @param {import('jest-resolve').ResolverOptions} options
 * @returns {string}
 */
module.exports = function resolve (path, options) {
  return resolver(localModules.get(path) ?? path, options)
}

In my specific case, all the local modules are located within the packages directory. You may need to adjust this path if your setup differs.

For those who are facing a similar challenge, I trust that you possess the expertise to comprehend the provided code without detailed explanations :)

Answer 2

After analyzing the issue, it appears that jest is resolving the local modules within a monorepo without transpiling them beforehand. The solution provided in this response is more of a workaround rather than a definitive fix.

My approach involves adjusting the import path to be recognized as a path import instead of an external package.

Here is a snippet from my jest.config.ts file:

const config: Config = {
  preset: 'ts-jest/presets/js-with-ts-esm',
  resolver: '<rootDir>/jest.resolve.cjs',
  // additional configuration details omitted for brevity
}

export default config

The contents of the jest.resolve.cjs file are as follows:

const fs = require('node:fs')
const path = require('node:path')
const resolver = require('ts-jest-resolver')

const localModules = new Map(
  fs.readdirSync(path.join(__dirname, 'packages'), { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory())
    .map((dirent) => {
      const directory = path.join(__dirname, 'packages', dirent.name)
      const pkg = require(path.join(directory, 'package.json'))
      const main = path.join(directory, pkg.main)

      return [pkg.name, main]
    }),
)

/**
 * @param {string} path
 * @param {import('jest-resolve').ResolverOptions} options
 * @returns {string}
 */
module.exports = function resolve (path, options) {
  return resolver(localModules.get(path) ?? path, options)
}

In my specific case, all the local modules are located within the packages directory. You may need to adjust this path if your setup differs.

For those who are facing a similar challenge, I trust that you possess the expertise to comprehend the provided code without detailed explanations :)

Module '@foo' cannot be located within the ts-jest setup in a monorepository

Answer №1

Similar questions

Accessing information independent of Observable data in TypeScript

Ionic 2: Unveiling the Flipclock Component

Transform a string into a class in Typescript/Angular

Steps for creating a TypeScript project with React Native

Converting types to "any" and encountering the error message "There are two distinct types with the same name, but they are not related."

Steps to enable the submit button in angular

Arrange objects in dropdown menu to line up

Tips for adjusting the dimensions of a map within the app.component.html

Troubleshooting issue with Vue Class Component and Vuex-class causing ESLint error

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Encountering the error "Unable to access the 'user' property of an undefined object when working with Angular and Firebase

Tips for creating an interface in TypeScript that prevents access to uninitialized properties of a class

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

Stop the transmission of ts files

Set the GridToolbarQuickFilter text box to have an outlined style in Material UI v5

Typescript meets ESLint in perfect harmony

Exploring the possibility of integrating direct search functionality into the URL bar within an Angular application

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

Combining indexed types with template literals -- add a prefix to each key