2017-11-14 15 views
5

Ich habe eine Komponente:Importierte Arten Objekt ist leer in Jest

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

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

Dies ist der Testfall:

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

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

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

statt

Wenn ich die importierten Stile trösten ich

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

Dies ist nur in Jest Testfällen. Stil ist nicht definiert, wenn die App im Browser gerendert wird.

Mein Scherz 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" 
    } 
} 

Mit Scherz v21.2.1, identitäts obj-Proxy v3.0.0 und Reagieren v16.0.0.

+0

versuchen Sie mit diesem 'Import Stile von './RedComponent.css';' –

+0

@MartinShishkov wow, das funktioniert! Kannst du das als Antwort posten? Weißt du auch warum '' 'import * as''' nicht funktioniert? –

Antwort

2

Sie diese Zeile ändern

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

dazu müssen :

import styles from './RedComponent.css'; 

Ich nehme an, dass Sie css-loader oder ähnliches verwenden und das ist nur wie der Lader funktioniert.

+0

Ja tatsächlich. Um die CSS-Module zu aktivieren, müssen Sie Webpack so konfigurieren, dass der 'css-loader' zusammen mit der Option' modules' auf 'true' gesetzt wird. – ValentinVoilean

2

worths Vielleicht das Beispiel zu überprüfen: https://github.com/keyanzhang/jest-css-modules-example/

Ich denke, Ihre moduleNameMapper so sein sollte:

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

+1

Oops Ich habe Klassennamen verwechselt, die durch Requisiten für Klassennamen weitergegeben wurden, die von importierten Stilen übernommen wurden, und dachte, das funktionierte, aber es funktioniert nicht. –

+0

OK, kein Problem. Freut mich, dass du es am Ende gelöst hast. – ValentinVoilean