如何在Gatsby 3中为CSS模块设置Jest

Question

在盖茨比3中，import styles from './styles.module.css'语法不再受支持，已被import * as styles from './styles.module.css'取代。

不幸的是，使用新语法不适用于建议的Jest设置，即对CSS模块使用identity-obj-proxy——访问styles对象上的任何属性都会返回undefined，而不是属性名称。

当我使用命名导入(例如import { wrapper } from './styles.module.css'(时，它确实可以正常工作，但由于我正在将一个相当大的应用程序迁移到Gatsby 3，我更喜欢最初使用import * as styles ...语法。

是否有其他推荐的设置Jest的方法可以同时使用import * as styles from ...和import { wrapper} from ...？

Answer 1

在identity-object-proxy的一个未决问题中提供了一个解决方案。它允许您使用import * as styles ...语法，通过修改Jest的配置来满足Gatsby的要求。

创建一个mock来修改样式文件的identity-object-proxy：

// .jest/__mocks__/identity-object-proxy-esm.js
module.exports = new Proxy(
{},
{
get: function getter(target, key) {
if (key === '__esModule') {
// True instead of false to pretend we're an ES module.
return true;
}
return key;
}
}
);

并更新jest-config以使用mock:

// jest.config.js 
module.exports = {
...
moduleNameMapper: {
'\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy',
'\.(css|scss)$': '<rootDir>/.jest/__mocks__/identity-obj-proxy-esm.js'
}
};