I currently have a project that uses jest for unit testing. The issue I an encountering is that one of the dependency modules is requiring a .css file:
./node_modules/problem-module/dist/problem-module.js:
line 0: require("./problem-module.css");
I configured jest to not ignore that specific module for transformation, fixing the issue with the CSS being required. Although, now the test blows up because jest is attempting to also transform all of the .js files in the module with babel-jest, which have all previously been ran through babel prior to the module being published. which results in an error similar to:
TypeError: (0 , problemModuleFunction.default) is not a function
My jest configuration:
"jest": {
"testEnvironment": "jsdom",
"testMatch": [
"<rootDir>/src/**/*.test.js"
],
"moduleDirectories": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
},
"transform": {
"^((?!mock).)*.(js|jsx)$": "babel-jest",
"\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"transformIgnorePatterns": [
"node_modules/(?!(problem-module))"
],
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
],
"moduleFileExtensions": [
"css",
"scss",
"js",
"json",
"jsx"
]
},
What would be the best method to make sure that the CSS files from this module are mapped properly without transforming any of the JS files?