Support named exports
See original GitHub issueWhen 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:
- Created 5 years ago
- Reactions:10
- Comments:10
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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:
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-Jest25.5
identity-obj-proxy3.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 totrue
(you can removeallowSyntheticDefaultImports
that will be enabled). And replace all of yourimport * as style from "./component.module.css"
withimport 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 thefiles
property of thetsconfig.json
. For example a dedicatedtsconfig.json
forts-jest
that extends the app one: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:
I hope that help!