driveby spelling

Author: export-mike

_posts/2016-02-02-react-redux-unit-testing.md

@@ -7,15 +7,6 @@ categories: react
 In this post I'll go through how to get enzyme setup to test your presentational components.
 ---
 
----
-layout: post
-title:  Unit Testing React Components and Redux Containers
-author: Mike James
-categories: react
----
-In this post I'll go through how to get enzyme setup to test your presentational components.
----
-
 ### Unit testing React Components and Redux reducers
 
 NB: this post assumes knowledge of react, redux and webpack.
@@ -29,18 +20,18 @@ In this post we'll go through the setup of a React, Redux Webpack application wi
 ### Folder Structure of our application.
 ![http://i.imgur.com/43wv76d.png](http://i.imgur.com/43wv76d.png)
 
-karma.config we'll need to load up our components and containers into a browser for testing as we're using postcss and other loaders that don't work natively in node.js. So to get our tests to run in browser we will also include a copy of our webpack config to get karma to load it up. If you load up your tests which rely on webpack loaders down the line you'll get Unexpected token errors.
+karma.config we'll need to load up our components and containers into a browser for testing as we're using postcss and other loaders that don't work natively in node.js. So to get our tests to run in browser we will also include a copy of our webpack config to get karma to load it up. If you load up your tests normally withouy karma, down the line you'll get Unexpected token errors.
 
-server.js selects an appropriate .dev.js, .prod.js file on startup. server.dev.js uses webpack dev server. prod.js uses just express to host the static output in the dist folder.
+server.js selects an appropriate .dev.js, .prod.js file on startup. server.dev.js uses webpack dev server. prod.js is a very simple express app hosting static output in the dist folder.
 
-src is where our application code lives. Components contain our presentational components such as TexBox, Button(s), ListItem etc. All components are decoupled from redux. With styles being loaded in ```import styles from './styles.css'``` by using [Css Modules](https://github.com/css-modules/css-modules). Everything a component behaves on is passed down into its props.
+src is where our application code lives. Components contain our presentational components such as TextBox, Button(s), ListItem etc. All components are decoupled from redux. With styles being loaded in ```import styles from './styles.css'``` by using [Css Modules](https://github.com/css-modules/css-modules). Redux provides us with top down rendering so we keep our components clean and stateless.
 
-containers, react components that have very little if any styling. With the glue to pass down state to its child components. In here we're also making use of redux-forms higher order component to give us validation and state management as forms generally behave is the same way. This library has dramatically helped reduce boilerplate.
+containers (redux glue), react components that have very little if any styling. With the glue to pass down state to its child components. Within this directory we create our top level routes, such as home, about etc. In here we're also making use of redux-forms higher order component to give us validation and state management as forms generally behave is the same way. This library has dramatically helped reduce boilerplate.
 
-actions contains our functions that are triggered by user actions or workers in our application. 
+actions contains our functions that are triggered by user actions or workers in our application. We can use these actions later in our reducer tests. 
 
 ### Testing our reducers
-This is trivial, redux has no coupling to the browser here, so we can test our application like a state machine. 
+This is trivial, redux has no coupling to the browser here, so we can test our application like a state machine with simple input output. With tests running fast in node environment.
 
 Example Test:
 
@@ -88,7 +79,7 @@ export default createReducer(initialState, {
   })
 });
 ```
-If you're interested in what createReducer does [see](https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/utils/index.js#L12) it gives a nicer switch structure.
+If you're interested in what createReducer does [see](https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/utils/index.js#L12) it gives a nicer switch structure. I quite like it.
 
 ### Testing react components with enzyme
 Enzyme gives us a simple jQuery like selector interface which is really powerful for asserting whats been rendered.
@@ -253,13 +244,13 @@ module.exports = (config) => {
 };
 ```
 
-you'll notice we're doing some funky stuff with sinon to stop it breaking require. 
+you'll notice we're doing some funky stuff with sinon to stop it breaking require. Yeah we can share webpack.config here to reduce duplication but for this example we've copied and pasted it.
 
-We can now test our react components in silo and with the power of PhantomJS, we're able to test our components extremly fast. Setup a ```npm run karma:watch``` task to run in the background whilst developing. Here we're currently testing a dumb presentational component, but next we can go ahead and test our redux containers for more functional testing.
+We can now test our react components in silo and with the power of PhantomJS, we're able to test our components very fast. Setup a ```npm run karma:watch``` task to run in the background whilst developing. Here we're currently testing a dumb presentational component, but we can go further and test our redux containers for more functional testing.
 
-And thats it! in the coming week I'll release a bare bones boilerplate project, complete with postcss, hot module replacement with the testing config shown here.
+And thats it! in the coming week I'll release a bare bones boilerplate project, complete with postcss, hot module replacement and the testing config shown here.
 
-voice you're opinion at me [@export_mike](https://twitter.com/@export_mike) on twitter or [@pebblecode](https://twitter.com/@pebblecode). Thanks for reading, oh! I almost forgot we're [hiring](http://pebblecode.com/careers/#job-1220)!
+voice you're opinion at me [@export_mike](https://twitter.com/@export_mike) on twitter or [@pebblecode](https://twitter.com/@pebblecode). I'm just scratching the surface of the react testing story, I'd be interested if you've had any pains or gains in testing your React components. Is this useful information? Let me know. Thanks for reading, oh! I almost forgot we're [hiring](http://pebblecode.com/careers/#job-1220)!