skip to Main Content

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?

2

Answers


  1. Based on the linked to issue, I believe this comment correctly identifies the problem. Once the maintainers of @uiw/react-textarea-code-editor decided to use a version of rehype that only supports ESM, they should have removed their support of CJS in the next major release.

    If you are ok with downgrading your @uiw/react-textarea-code-editor version you can npm i @uiw/[email protected] which is the most recent version that relies on a CommonJS version of rehype.

    Alternatively, if you are ok mixing your current version of@uiw/react-textarea-code-editor with a different version of rehype and use a package manager that supports transitive dependency resolution, for example resolutions for yarn or overrides for npm, then you can downgrade to [email protected] the most recent version using CommonJS.

    For example, using npm:

      "overrides": {
        "rehype": "11.0.0"
      }
    
    Login or Signup to reply.
  2. 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'
    },
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search