phong cách nhập khẩu đối tượng là trống rỗng trong jest

Question

Tôi có một thành phần:

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

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

Đây là trường hợp thử nghiệm:

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

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

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

thay vì

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

Nếu tôi an ủi các phong cách nhập khẩu tôi nhận được

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

Đây là chỉ trong trường hợp thử nghiệm jest. Kiểu không được xác định khi ứng dụng hiển thị trong trình duyệt.

cấu hình jest của tôi:

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

Sử dụng jest v21.2.1, bản sắc-obj-proxy v3.0.0 và Phản ứng v16.0.0.

Answer 1

Bạn phải thay đổi dòng

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

này để này :

import styles from './RedComponent.css'; 

Tôi giả sử bạn đang sử dụng css-loader hoặc tương tự và đây chỉ là cách trình tải hoạt động.

Answer 2

lẽ worths để kiểm tra ví dụ: https://github.com/keyanzhang/jest-css-modules-example/

Tôi nghĩ bạn moduleNameMapper nên như thế này:

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