react-css-modules


Cannot use react-css-modules with Jest


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

Related Links

will react-css-module errorWhenNotFound to be false has side effects
Cannot use react-css-modules with Jest
Add styleName property on React component when using react-css-modules

Categories

HOME
openlayers
hook
reserved
mfc
appx
lodash
analysis
jxls
networkx
webrequest
facebook-messenger-bot
gnupg
offline
handsontable
quickbooks
messages
percona
django-simple-history
highlight.js
fatal-error
http-status-code-504
undefined
autoconf
kudan
crosstab
status
delicious-api
madlib
instant-messaging
junit5
contact-form
jspresso
code-contracts
avcapturesession
xmlreader
android-nestedscrollview
vapor
document.write
angularjs-factory
sas-visual-analytics
gulp-sourcemaps
vao
scorm
babel-core
rainbowtable
network-flow
theming
rails-routing
togetherjs
drupal-6
typed-lambda-calculus
sqldf
spring-cache
vtigercrm
xcb
multi-level
transmitfile
impresspages
bgp
design-by-contract
ptrace
xpath-1.0
javax.sound.midi
r-tree
qtableview
jmeter-maven-plugin
0xdbe
interrupted-exception
sortedlist
oberon
c3
knuth
tt-news
zend-route
php-5.4
contenttype
mechanize-ruby
picturefill
access-rights
dataservice
eventlistener
drools-planner
factory-method
first-responder
pysimplesoap
tridion-worldserver
objective-c-2.0
dotnethighcharts
zpt
cinema-4d
xfbml
gallio
firefox-5
firefox4
microsoft-virtualization
ctp4
mtj
eqatec
dbisam
ntvdm.exe

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App