3

Jest、React、PostCSS でテストを実行しようとしています。を使用して、react-css-modules なしで正常に動作させることができましたclassName={styles.*}。また、CSSモジュールについては、ES2015プロキシを使用できますが役に立ちませんでした。

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

1 に答える 1