Cannot use react-css-modules with Jest

Question

I'm trying to run tests with Jest, React and PostCSS. I could make it work fine without react-css-modules by using className={styles.*}. Also tried For CSS Modules, you can use an ES2015 Proxy didn't help.

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

Failing test:

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

Stack trace:

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)

crabicode · Accepted Answer · 2016-11-26 15:54:22Z

1

Solved, pls refer to https://github.com/gajus/react-css-modules/issues/196

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

answered Nov 26, 2016 at 15:54

crabicode

631 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot use react-css-modules with Jest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related