インポートスタイルは、オブジェクトI成分を有する冗談

Question

に空である：

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

class RedComponent extends React.Component { 
    render() { 
    return <div className={ styles.red }></div>; 
    } 
} 

これは、テストケースである：

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

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

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

代わりに

を与えます

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

私はこれが唯一の冗談のテストケースである

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

を取得し、インポートスタイルを慰める場合。アプリがブラウザでレンダリングするとき、スタイルは未定義ではありません。

私の冗談設定：

{ 
    "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" 
    } 
} 

冗談v21.2.1、アイデンティティ-OBJ-プロキシV3.0.0て反応v16.0.0を使用しました。

Answer 1

あなたはこのラインにこれ​​に

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

を変更する必要があります：

import styles from './RedComponent.css'; 

は、私はあなたがcss-loaderまたは類似を使用していることを前提とし、これは、ローダが動作するだけでどのようにです。

Answer 2

はたぶん例を確認するためにworths： https://github.com/keyanzhang/jest-css-modules-example/

私はあなたのmoduleNameMapperは次のようにあるべきだと思う：

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