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
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 ofrehype
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 cannpm i @uiw/[email protected]
which is the most recent version that relies on a CommonJS version ofrehype
.Alternatively, if you are ok mixing your current version of
@uiw/react-textarea-code-editor
with a different version ofrehype
and use a package manager that supports transitive dependency resolution, for exampleresolutions
foryarn
oroverrides
fornpm
, then you can downgrade to[email protected]
the most recent version using CommonJS.For example, using
npm
:Are you able use
path.resolve
?or a relative path to
<root>