'Jest : TypeError: require(...) is not a function
The application is written by React with ES6 so import
and export
statements are used inside the application. So Jest is configured to work compatible with ES6, but compiled node_modules dependencies are causing an error which is
TypeError: require(...) is not a function
when tests started.
I assume this is happening because Jest configured to work with babel-jest to handle import
statements, but compiled codes are using require
for handling the modules. I tried to exclude node_modules folder, but nothing changed. I think, ES6 modules using compiled modules placed into the node_modules as a dependency because of that it cannot be excluded? Is it possible?
Also, I am having a problem to understand how does jest handle both import
and require
at the same time? If ES6 codes are compiled first then each module will be handled as require
after that compiling process. So what is the problem?
Here are the configurations
jest.config.js
module.exports = {
clearMocks: true,
moduleNameMapper: {
"^.+\\.(js|jsx)$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/mocks/fileMock.js",
"\\.(css|scss|sass|less)$":
"<rootDir>/mocks/styleMock.js"
},
modulePathIgnorePatterns: [
"node_modules/"
]
};
babel.config.js
/* eslint-disable */
module.exports = {
presets: [
"@babel/preset-react",
[
"@babel/preset-env",
{
targets: {
browsers: ["ie >= 9", "safari >= 8"]
}
}
]
],
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
[
"@babel/plugin-proposal-class-properties",
{ loose: true }
],
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-object-assign",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime"
],
env:{
test:{
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
[
"@babel/plugin-proposal-class-properties",
{ loose: true }
],
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-object-assign",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime"
]
}
}
};
Solution 1:[1]
If you are tying to import any file for example a font file, then simply create a mockFile that just have
// mockFile.ts or mockFile.js
export default {};
and then in jest.config.js
moduleNameMapper: {
'^.+\\.(woff2)$': '<rootDir>/<path to file>/mockFile.ts',
},
This will resolve to the mockFil when it will try to import a font file. You can also add other file extentions like '^.+\\.(jpg|png|woff2)$: '<rootDir>/<path to file>/mockFile.ts'
.
It should work.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Aamir Iqubal |