Imported styles object is empty in Jest

Question

I have a component:

import React from 'react'; import * as styles from './RedComponent.css'; class RedComponent extends React.Component { render () { return <div className={ styles.red }></div>; } } 

This is a test case:

 describe('Test suite', () => { test('RedComponent tests', () => { const wrapper = shallow(<RedComponent />); }); 

console.log(wrapper.debug()); gives

 <div className={[undefined]}></div> 

instead

 <div className="RedComponent__red"></div> 

If I am a console of imported styles, I get

 console.log(styles); // {default: {}} 

This is only in Jest tests. The style is not undefined when the application is displayed in the browser.

My jest config:

 { "moduleFileExtensions": [ "js" ], "moduleDirectories": [ "node_modules" ], "moduleNameMapper": { "\\.(css|less)$": "identity-obj-proxy" }, "setupFiles": [ "./test-setup.js" ], "collectCoverageFrom": [ "src/**/*.{js}", "!**/node_modules/**" ], "testEnvironment": "node", "transform": { "^.+\\.js$": "babel-jest", "\\.(md|ttf|txt|eot|ico|otf|svg|png|gif|woff2|woff|jpeg)$": "./file-transformer.js" } } 

Using jest v21.2.1, identity-obj-proxy v3.0.0 and React v16.0.0.

Answer 1

You have to change this line

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

:

 import styles from './RedComponent.css'; 

I assume you are using css-loader or the like, and that is exactly how the loader works.

Answer 2

It might be worth checking out an example: https://github.com/keyanzhang/jest-css-modules-example/

I think your moduleNameMapper should look like this:

"^.+\\.(css|less)$": "identity-obj-proxy"