上一节有讨论过，单元测试就是以代码单元为单位进行测试，代码单元能够是一个函数，一个模块，或者一个类。不少人认为大多数测试都应该叫单元测试，其实个人观点仍是那句话，无所谓怎么叫，名字叫什么都行。只要你作了足够多的测试，可以保证你部署到线上的生产代码没有问题就能够了。git
单元测试是最容易理解、也最容易实现的测试方式。给单元测试一个输入，让它自动执行，将输出结果和预期结果作对比看其是否正确（输入能够是一个函数参数，输出就是函数的返回值）。github
在写单元测试的时候，尽可能将你的单元测试独立出来，不要几个单元互相引用。养成这样良好的测试习惯。算法
第一节中提到过，为了这系列博文，我写了一个计算器应用，后面都会拿它进行测试。理论就讲到这里，一块儿来看一下 Calculator 应用吧，源代码在这里。主要有两个组件： keypad 和 display ，它们自身都是 React 单元，也都没有引用其余单元，后面会介绍如何对它们进行测试。数据库
（若是你已经看了代码可能已经发现了我没有使用 JSX。由于我不想进行转译。如今 Node 和全部流行的浏览器都已经彻底支持 ES6 了，那么做为一个例子来说，让它直接运行会更好一些。虽然它不能运行在 IE 上，不过也不要紧，若是是一个真实的线上项目，我会进行转译的。）浏览器
还有一个问题是按键和展现的逻辑问题，必需要有代码来控制当点击按键的时候发生什么。这里的按键包括数字键（如“1”，“5”）和操做键（如“+”，“=”）。按一般的作法，我把组件设计成了展现型组件（键盘）和容器型组件。容器型组件在个人 App 中是惟一包含 state 的组件，它要考虑当发生按键行为的时候 App 内在逻辑的问题。frontend
处理逻辑问题的代码是一个单独的模块——calculator。这个模块对于单元测试是很完美的例子。由于它没有对 I/O 和 UI 的依赖。你也应该尽可能使你的应用逻辑上保持独立——模块不依赖于 I/O 和 UI。函数
对于 Web 应用来说，I/O 是什么？没有文件和数据库的操做？其实不单单是这样，还有 Ajax 调用，本地存储，DOM 操做等，对我而言，任何和浏览器 API 有关的都是 I/O 操做。post
我是怎么把计算逻辑从 React 组件中分离出来的呢？其实很简单，其内在逻辑是计算，我把他封装到一个模块中就能够了。单元测试
这个模块的实现也很容易——它接收一个计算器 state（一个对象）和一个字符（数字或者操做符），返回一个新的计算器 state。若是你用过 Redux，它很像 Redux 的 reducer 模式（若是你没用过 Redux 也不要紧）。可是若是一直由上一个 state 获取下一个 state，怎么能回到初始状态呢？这里还有一个模块叫作 initialState，经过它能够初始化计算器。计算器的 state 并非彻底黑盒的，它包含了一个字段叫作 display，能够把你想要展现的 state 显示在计算器应用上。测试
若是你没有耐心看源代码的话，咱们一块儿来看下这里面最重要的部分，应用中算法的细节其实不重要。