5

I am facing issue with running test cases on Jest when classnames ( https://www.npmjs.com/package/classnames ) library is being used :

It throws error : classnames_1.default is not a function

It is working with webpack on website itself.. so i don't want to change import.

I have an option to mock classnames for test to provide similar behaviour. Is there any other way to solve this issue ?

Has anyone faced this issue ?

Here is my jest configuration in package.json :

"jest": { "globals": { "API_HOST": "", "DEV": false }, "transform": { ".(ts|tsx)": "<rootDir>/node_modules/XXX-framework/jestTypeScriptPreProcessor.js" }, "testRegex": "(/tests/.*|\.(test|spec))\.(js|jsx|ts|tsx)$", "transformIgnorePatterns": [], "moduleFileExtensions": [ "ts", "tsx", "js", "json" ], "automock": false, "clearMocks": true, "resetMocks": true, "coverageThreshold": { "global": { "branches": 50, "functions": 50, "lines": 50, "statements": 50 } }, "modulePaths": [ "<rootDir>/src", "<rootDir>/node_modules/XXX-framework/src" ], "unmockedModulePathPatterns": [ "<rootDir>/node_modules/react/", "<rootDir>/node_modules/react-dom/", "<rootDir>/node_modules/react-addons-test-utils/", "<rootDir>/node_modules/enzyme/", "<rootDir>/node_modules/XXX-framework/" ] }

Thanks

Canta
  • 1,480
  • 1
  • 13
  • 26
Anil Sharma
  • 275
  • 1
  • 6
  • 16

1 Answers1

0

You are probably using css-loader, so it works with Webpack. The problem is that Jest doesn't load your CSS files with css-loader and it's your responsibility to tell Jest how to load CSS files. One way to do that is using identity-obj-proxy.

Do npm i -D identity-obj-proxy (or use yarn to install if you like)

and add this config to your Jest config file

"moduleNameMapper": {
  "^.+\\.css$": "identity-obj-proxy"
}

You can find more detail in this document.

wuct
  • 10,057
  • 2
  • 19
  • 22
  • 1
    I don't want to see css styles in test.. I just want to see if element has specific class when loaded. classnames is simply js library to return single string of classnames based on arguments. It is in js format so that does not even require conversion from typescript file to javascript file. – Anil Sharma Mar 07 '17 at 22:16
  • Do you mind to paste your code about how you use `classnames` here? – wuct Mar 08 '17 at 02:18