Babel-plugin-react-transform with Mocha Testing
I discovered a couple days ago the Babel-plugin-react-transform module now has support for Babel 6. The module and the family of transformers modules is to replace react-hot-loader. See here. My fondness toward React is that I really do believe it is helping me write better code.
I have been using Webpack to handle all my bundling and transpiling from ES5 to ES2015 after switching from Gulp. Yes, I agree the learning curve is a little sharper than Gulp. However once I got the slightest grasp I was hooked. Being exposed to hot module reload while learning React, I have come to understand and appreciate the benefits over a full refresh like livereload or browersync. Therefore I wanted to get my current React Redux app working once again with hot reload.
So I changed my .babelrc file to this below.
Immediately ran into just a few errors. One being redbox-react not installed. No big deal there. Searching npm I read what it does and ran
npm I — save-dev redbox-react
Once I got HMR working I jumped back to the terminal window and ran my test command. Instead of seeing a lush screen of green check mark passes, I got an error! How can this be, I thought. I did not change anything in the tests or code being tested.
Instead of the error screaming at me with red and a ton of characters that are supposed to represent ‘english’. I got a nice message at the top about the not running babel-transform-hmr in production.I was directed to the README, where I found this section I realized my problem was the transformer plugin gets included whenever NODE_ENV is set to development or undefined. In my case undefined. The npm command in the package.json file for test looked like…
Which I made a slight change.
I added in the NODE_ENV=test which I was thinking would stop the HMR transformer from being included. Low and behold, success!
Originally published at natacseanc.wordpress.com on December 23, 2015.