आयातित शैलियों आपत्ति जेस्ट

Question

में रिक्त है मैं एक घटक है:

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

console.log(wrapper.debug());

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

बजाय

देता है:

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

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

इस परीक्षण का मामला है

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

अगर मैं आयातित शैलियों को सांत्वना मैं

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

यह केवल जेस्ट परीक्षण मामलों में है मिलता है। ब्राउज़र में ऐप प्रस्तुत होने पर स्टाइल को अपरिभाषित नहीं किया जाता है।

मेरे हंसी 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" 
    } 
} 

हंसी 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"