[Jest]: Import of styles yield empty object?

[StevenLangbroek]

Describe the bug
We're using @babel/preset-typescript and jest (using babel-jest). My style imports yield empty objects, leading to snapshot tests failing.

I'm unsure how to pin down exactly what's causing this so what further info to provide
To Reproduce

// jest.config.js
module.exports = {
  // abbreviated for clarity
    transform: {
        '^.+\\.(js|jsx|mjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
        '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
        '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/optionalAssetsTransform.js',
    },
}

// component
import * as React from 'react';
import styles from './styles.m.css';

function MyComponent() {
  console.log(styles); // logs correctly in storybook & app, empty object in jest
  // return like normal
}

// test
describe('My Component', () => {
  it('matches its snapshot', () => {
    expect(mount(<MyComponent />)).toMatchSnapshot()
  });
});

Expected behavior

• An object containing key/values for every classname should be logged

What more info can I provide to figure out what's going on here?

[mrmckeb]

Hi @StevenLangbroek, this plugin only works within IDE environments. This is a limitation of TypeScript, as plugins aren't loaded during builds.

This is unfortunate, and as soon as TypeScript does support this, we'll be sure to add whatever is needed.

You can read more about that here:
https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin#whats-a-language-service-plugin

---

On your exact issue, it's likely that your app and Storybook have Webpack loaders to handle CSS modules. For Jest, there are libraries like these that might help?

• https://www.npmjs.com/package/jest-css-modules
• https://www.npmjs.com/package/jest-css-modules-transform

It looks like you have a file that should be handling this already (/config/jest/cssTransform.js) but maybe it isn't working?

[StevenLangbroek]

Fixed by using https://www.npmjs.com/package/jest-css-modules-transform. If you feel it's worth documenting I can add a line to README.

[StevenLangbroek]

Oh wow thanks for the thoughtful response 🙇 . Yeah that was exactly the issue. Let me know if you want me to write this into README..

[mrmckeb]

NP! I'll make an update in the next few days, that's a great idea - thanks ;)

And glad I could help.