Jestでreact-css-modulesを使用できません

Question

Jest、React、PostCSSでテストを実行しようとしています。私はclassName={styles.*}を使用して、反応-ssssモジュールなしでうまく動作させることができます。また試みたFor CSS Modules, you can use an ES2015 Proxyは役に立ちませんでした。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import App from './App'; 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(<App />, div); 
}); 

スタックトレース：テスト失敗

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import CSSModules from 'react-css-modules'; 
import styles from './App.pcss'; 

class App extends Component { 
    render() { 
     return (
      <div styleName="root"> 
       <div styleName="header"> 
        <img src={logo} styleName="logo" alt="logo" /> 
        <h2>Welcome to React</h2> 
       </div> 
       <p styleName="intro">To get started, edit <code>src/App.js</code> and save to reload.</p> 
      </div> 
     ); 
    } 
} 

export default CSSModules(App, styles); 

解決

TypeError: Class constructor App cannot be invoked without 'new' 
    at new WrappedComponent (node_modules/react-css-modules/dist/extendReactClass.js:46:58) 
    at node_modules/react-dom/lib/ReactCompositeComponent.js:295:18 
    at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (node_modules/react-dom/lib/ReactCompositeComponent.js:294:16) 
    at ReactCompositeComponentWrapper._constructComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:280:21) 
    at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:188:21) 
    at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35) 
    at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34) 
    at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21) 
    at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35) 
    at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32) 
    at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20) 
    at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15) 
    at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20) 
    at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26) 
    at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27) 
    at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18) 
    at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32) 
    at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23) 
    at Object.<anonymous>.it (src/components/App.test.js:8:50) 
    at process._tickCallback (internal/process/next_tick.js:103:7) 

Answer 1

を、plsはhttps://github.com/gajus/react-css-modules/issues/196

jest: { 
- "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", 
+ "transform": { ".*": "<rootDir>/node_modules/babel-jest" } 
} 

を参照してください。