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.
versuchen Sie mit diesem 'Import Stile von './RedComponent.css';' –
@MartinShishkov wow, das funktioniert! Kannst du das als Antwort posten? Weißt du auch warum '' 'import * as''' nicht funktioniert? –