Sunday, 24 January 2016

Setting up React tests with Mocha and Webpack

Writing unit for React classes written with ES6 is a bit less simple than for plain old ES5 JavaScript. The extra compilation steps mean that the production source files and the test code both need to be compiled before running.

To perform this role I'm using Webpack.  Webpack provides bundling and compilation bringing my source code (test or production) down into one big ES5 file.

To get Mocha tests running with Webpack.

Getting a basic test running

To get a basic test running, nothing  more than vanilla ES5 Java Script.
  • Include the Mocha loader (npm install mocha-loader)
  • Navigate to your test directory. 
  • Run "webpack mocha!./testroot.js testBundle.js"
  • Create an empty html file that includes testBundle.js after the body. 
  • Open the html file.

Using a config file

Obviously we want to use more than just Vanilla.js we want to include React and ES6 components. 

To do this I'm using a second config file, in addition to the one used to compile the client in to bundle.js,  This is in the root directory of the project next to the webpack.config.js file.



You can run webpack using this config file by specifying the config file explicitly.  "webpack --progress --colors --config ./test.webpack.config.js"

Open the html file from before, make sure it points to the same testBundle.js that you're config is spitting out.

Now you can start including and testing your React components.

Friday, 15 January 2016

Build Speed a less talked about Micro Services feature.

I was deploying a small app, you could call it a Micro Service, today to our test/demo environment at work and found a bug where I hadn't implemented a shared API correctly.

  • I realised my mistake.
  • Walked over to my development machine (the test/demo environment is physically and logically separated from the rest of the network).
  • Fixed the bug. 
  • Ran tests.
  • Pushed to CI. 
  • Took the installer generated from the CI build walked back over.
  • Installed the update. 
All in less than 5 minutes.  

I always hear about how Micro Services are quick to deploy, resilient to failure and scale-able, but rarely do I hear about the fact that they're quick to build.  This speed is because the compile time is lower and the test time is lower.  Overall it means that working on a Micro Service, or a small application in general is just more productive from a development point of view. 

Micro Services is the buzz word at the moment so you probably didn't need another reason to consider them as an architecture. But just in case you did, here it is . 

Tuesday, 12 January 2016

React Router Context Issue

I've been playing with React and using React Router to build a demo app.
The last couple of times I've sat down to work on it I've been struggling with what given hindsight seems like a very simple issue. 
The issue I was having was that after a user had logged in they would not be redirected to the page they wanted to view.  They would have been authenticated successfully but the redirect was throwing an exception because the router object in the context was undefined. 

The suggestions on how to fix this is to add this method to your React class.

 contextTypes{  
   router: React.PropTypes.object.isRequired  
 }   

This will check that there is a router object available in the context and make it available through

 this.context.router

If router is not available within the context object it will raise a warning in the console.

Failed Context Types: Required context `router` was not specified in ...   

This is what I was getting.   Lots of searching brought me to this issue on the Redux project that pointed out that in 1.0 the router context was changed to be location and history objects in the context. 

I went to bed and slept on this issue.  when I woke in the morning I though to check the versions of React Router that I was using vs the version in the example app (from react-router code base) that I was working from.

It turns out the issue was because my code was targeting 1.0.3 which as of 08:00 2016-01-12 Newcastle N.S.W. time is the version that is installed when running

npm install --save react-router 

I changed this to "2.0.0-rc4" in my package.json file re ran npm install and now it's all working.

The moral of this story is that with the wild and fast evolving world of web frameworks, even if you've gotten the latest from npm you don't necessarily have the latest as far as the project is concerned.