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

Question

In Gatsby 3 import styles from './styles.module.css' syntax is no longer supported and has been replaced with import * as styles from './styles.module.css' .

Unfortunately, using the new syntax doesn't work with the suggested Jest setup, ie using identity-obj-proxy for CSS modules - accessing any property on styles object returns undefined rather than the property name.

It does work correctly when I'm using named imports, eg import { wrapper } from './styles.module.css' , but as I'm migrating a rather large app to Gatsby 3, I'd prefer to initially use import * as styles... syntax.

Is there any other recommended way to set up Jest that would work with both import * as styles from... and import { wrapper} from... ?

Answer 1

There's a solution provided in one of the open issues for identity-object-proxy . It allows you to use import * as styles... syntax to satisfy Gatsby by modifying Jest's configuration.

Create a mock to modify identity-object-proxy for style files:

// .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;
    }
  }
);

And update jest config to use the 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'
  }
};