[英]How to set up Jest for CSS modules in Gatsby 3?
在 Gatsby 3 中,不再支持import styles from './styles.module.css'
语法,并已替换为import * as styles from './styles.module.css'
。
不幸的是,使用新语法不适用于建议的 Jest 设置,即对 CSS 模块使用identity-obj-proxy
- 访问styles
object 上的任何属性返回undefined
而不是属性名称。
当我使用命名导入时它确实工作正常,例如import { wrapper } from './styles.module.css'
,但是当我将一个相当大的应用程序迁移到 Gatsby 3 时,我更愿意最初使用import * as styles...
语法。
是否有任何其他推荐的方法来设置 Jest 可以与import * as styles from...
和import { wrapper} from...
一起使用?
identity-object-proxy
的一个开放问题中提供了一个解决方案。 它允许您使用import * as styles...
语法通过修改 Jest 的配置来满足 Gatsby。
创建一个模拟来修改样式文件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 配置以使用模拟:
// 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'
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.