react-css-modules - 不能将 react-css-modules 与 Jest 一起使用

Question

我正在尝试使用 Jest、React 和 PostCSS 运行测试。通过使用 className={styles.*}，我可以在没有 react-css-modules 的情况下正常工作。也试过For CSS Modules, you can use an ES2015 Proxy没有帮助。

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);

失败测试:

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);
});

堆栈跟踪:

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

已解决，请引用https://github.com/gajus/react-css-modules/issues/196

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