使用 Jest 进行测试时，classnames_1.default 不是函数

Question

当使用类名（https://www.npmjs.com/package/classnames）库时，我在Jest上运行测试用例时遇到问题：

它抛出错误：classnames_1.default 不是函数

它正在网站上使用 webpack 本身..所以我不想改变导入。

我可以选择模拟类名以进行测试以提供类似的行为。有没有其他方法可以解决这个问题？

有没有人遇到过这个问题？

这是我在 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/" ] }

谢谢

Answer 1

您可能正在使用css-loader，因此它可以与 Webpack 一起使用。问题是 Jest 不会加载您的 CSS 文件css-loader，您有责任告诉 Jest 如何加载 CSS 文件。一种方法是使用Identity-obj-proxy。

这样做npm i -D identity-obj-proxy（或者如果你愿意的话可以使用yarn来安装）

并将此配置添加到您的 Jest 配置文件中

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

您可以在本文档中找到更多详细信息。