Target monorepo root directory in jest config within monorepo package

Question

I have the following file structure in my monorepo

📦monorepo
 ┣ 📂node_modules
 ┣ 📂packages
 ┃ ┣ 📂package-1
 ┃ ┃ ┗ 📜jest.config.js
 ┃ ┣ 📂package-2
 ┃ ┃ ┗ 📜jest.config.js
 ┃ ┣ 📂package-3
 ┃ ┃ ┗ 📜jest.config.js
 ┣ 📜package.json
 ┗ 📜jest.base.config.js

In the monorepo root I have the file jest.base.config.js which contains

module.exports = {
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@fortawesome/react-native-fontawesome|d3-.*|internmap)/)',
  ],
};

Then in each packages jest.config.js I imported the jest.base.config and export it with any overrides, like so

const baseConfig = require('../../jest.base.config');

module.exports = {
  ...baseConfig,
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}', '!src/**/*.style.{ts,js}'],
  moduleNameMapper: {
    '^.+\\.svg$': '<rootDir>/__mocks__/mockSVG.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf)$':
      '<rootDir>/__mocks__/mockFile.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  globals: {
    __WEB__: true,
    google: {},
  },
  setupFiles: ['./jest.setup.js'],
  testURL: 'http://localhost:3000',
};

However, there is an issue with one of the packages @uiw/react-textarea-code-editor (Issue Here) that needs a mapper, so trying to map it to a common js file, by adding it as a property in the moduleNameMapper property in the jest.config.js file.

moduleNameMapper: {
  ...
  '@uiw/react-textarea-code-editor': '<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js',
},

This works on a regular repository I have, but the issue here is <rootDir>/node_modules is targeting ./packages/package-1/node_modules and not ./node_modules on the root of the monorepo as that is where the @uiw directory resides.

Now, I know I can change the rootDir to be rootDir: './../../', but that throws off all other references to rootDir

I tried

moduleNameMapper: {
  ...
  '@uiw/react-textarea-code-editor': '../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js',
},

Which should target ./node_modules/@uiw/react-textarea-code-editor/dist/editor.js

But that gives me the following error

Configuration error:
    
    Could not locate module @uiw/react-textarea-code-editor mapped as:
    ../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/@uiw\/react-textarea-code-editor/": "../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js"
      },
      "resolver": undefined
    }

Is there a more elegant solution than changing the rootDir value?

Answer 1

Are you able use path.resolve?

moduleNameMapper: {
  '@uiw/react-textarea-code-editor': path.resolve(
     __dirname, 
    '../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js'
  ),
},

or a relative path to <root>

moduleNameMapper: {
  '@uiw/react-textarea-code-editor': '<rootDir>/../../node_modules/@uiw/react-textarea-code-editor/dist/editor.js'
},