Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support named exports

See original GitHub issue

When using CSS modules with named exports (e.g. you’re using Typescript and typings-for-css-modules-loader), they look like:

export const foo = 'foo';
export const barBaz = 'barBaz';

And the consumer uses as:

import * as styles from './styles.css';

<div className={styles.barBaz} />

This mock does not play nice. I’ve found that returning true for the __esModule check here does work - essentially saying that our mocked module is an ES module and the keys are the named exports.

Any ideas if and how this project could accommodate that? E.g. using identity-obj-proxy/esm?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:10
  • Comments:10

github_iconTop GitHub Comments

joaovieiracommented, Oct 16, 2018

@gabsprates @john-d-pelingo sorry for not answering here, what I did was to define my own css mock with the modified identity-obj-proxy as mentioned above:

// .jest/identity-obj-proxy-esm.js

// Modified identity-obj-proxy.

// This works around the fact we use ES named exports for styles, e.g.:
// import * as styles from './styles.scss'.
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.js

module.exports = {
  moduleNameMApper: {
    '\\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy',
    '\\.(css|scss)$': '<rootDir>/.jest/identity-obj-proxy-esm.js',
nicolashemoniccommented, May 6, 2020

Hello guys,

Thank you all to share your solution.

There is a very more simple solution to make work Jest + Typescript + Css Module in 2020.

Typescript compilation typings-for-css-modules-loader is a deprecated tool that can be replaced by the Typescript plugin typescript-plugin-css-modules. The main advantage is that this plugin generate “hidden” definition file on the fly for each css module. All the stuff is totally managed by the compiler itself (not Webpack).

Test snapshot Along these versions: jest 25.5 ts-Jest 25.5 identity-obj-proxy 3.0

You don’t need to modify identity-obj-proxy. The problem you know is that Typescript not generate a default export for all class names. To fix that you just need two things:

1/ Set the esModuleInterop option of Typescript to true (you can remove allowSyntheticDefaultImports that will be enabled). And replace all of your import * as style from "./component.module.css" with import style from "./component.module.css". The compiler will generate for the compilation a helper that allow to retrieve all named export in a default one.

2/ Add the definition file created for typescript-for-css-modules here into the files property of the tsconfig.json. For example a dedicated tsconfig.json for ts-jest that extends the app one:

    "extends": "../tsconfig",
    "files": [

This file allow the Typescript compiler to understand the import of the Css file and proceed to the compilation before the test.

Test Result Finally the snapshot contains the class names:

// Jest Snapshot v1,

exports[`<PrettyGraph /> rendering should display current situation 1`] = `
  Hello World!

I hope that help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

export - JavaScript - MDN Web Docs
This re-exports all named exports from mod as the named exports of the current module, but the default export of mod is not...
Read more >
Node.js now supports named imports from CommonJS ...
First Things First: What are named exports? · The Big Gotcha: Named imports don't work for all CJS modules · A Comedy of...
Read more >
Named export 'Types' not found. The requested module ...
Named export 'Types' not found. The requested module 'mongoose' is a CommonJS module, which may not support all module.exports as named exports.
Read more >
Named Export vs Default Export in ES6 | by Alankar Anand
ES6 provides two ways to export a module from a file: named export and default export. ... With named exports, one can have...
Read more >
Use Named Exports over Default Exports in JavaScript
Named exports are imported with curly braces in various files and must be imported using the name of the object, function or variable...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found