Mocking the CSS webpack imports using identity-obj-proxy

I’m sure at some point you have encountered the SyntaxError: Unexpected token . error when preparing tests with Jest, it pointed at the dot of the CSS class name.

({“Object.“:function(module,exports,require,__dirname,__filename,global,jest){.my-class {
^
SyntaxError: Unexpected token .

If you are familiar with it then probably you have resolved it and probably already are using the identity-obj-proxy dependency in your project. For those who are searching for a solution please read on.
Continue reading

Chrome Extension with React – gotcha

I’m rebuilding my Chrome Extension Tab List to use ReactJS (as part of my learning trip) and encountered following error:

Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource:”.

Continue reading

Order of Higher Order Components (HOC) matters

I’ve just learned the hard way that order of calling Higher Order Components (HOC) matters and can lead to hard to debug errors. I’ve used the Redux and React Router Dom. Started with Redux so I had component like so:

import react, {Component} from 'react'
import connect from 'react-redux/lib/connect/connect';

class Home extends Component {
    // ... chopped for brevity
}

export default connect(mapStateToProps)(Home);

Continue reading