最近看到Mobx作者录的MST视频教程受到启发，因为MST与React组件实际上互相独立，使用MST可以实现一种低成本的前端TDD开发模式，与传统UI驱动的开发模式有很大不同。个人感觉挺有意思的，所以记录下来，后续有机会实践一下，慢慢踩坑。
TDD开发模式
TDD开发是测试驱动开发模式，与之对应的行为驱动开发模式（BDD）。TDD模式的核心是由测试来推动整个开发的进行。在开发功能之前，先写测试（一般指单元测试）确定要开发的功能，通过测试用例来把控需求和产品功能。测试用例将伴随需求持续更新，并把控整个产品的质量。BDD模式则相反，先根据产品设计开发功能，完成功能开发后再编写相应的测试做质量把控。
前端一般都是采用BDD的开发模式，流程一般是先由产品经理产出需求文档，再交给UX设计产出设计稿，最后前端进行功能开发。这种开发方式有几个常见的问题：
- 依赖设计产出，容易被设计Delay，并且经常需要跟随设计修改前端功能
- 经常被拖入产品设计中，加大心智负担
- 功能开发完成后经常忽略测试，开发自动化测试负担太大，导致前端测试依赖人肉
TDD开发模式可以一定程度上解决上面的问题。但是，在前端开发中，自动化UI测试的编写成本很高，而且先写测试再写UI不符合大部分人的思考习惯，所以很少有前端开发会应用TDD的开发模式。
MST应用
使用MST的React Webapp可以低成本的分离逻辑和UI层，让应用TDD模式的成本大幅降低。核心的思路是把所有的逻辑相关操作都放到MST的action中，React组件中只是通过各种事件处理函数调用MST中的action。MST的action是完成了一定逻辑的函数，借助MST是初始化功能，可以方便的在测试文件中初始化要测试的MST，再进行对action函数的单元测试。
这样一来，每个需求在MST中都变成了对应的Action，每个action有对应的单测来确定action需要完成的功能，单测就成为了需求的代码解释。整个针对功能需求开发测试的过程不再涉及到任何React UI组件，变成了一般的对function编写的单元测试，大幅减少了测试的开发成本，开发的流程也更符合大部分人的心智。通过测试可以保证每个action的行为正确。
MST除了解决逻辑部分的测试问题，也让编写React UI组件的测试更加简单。因为UI组件的测试现在不再需要关注任何逻辑，只需要关注渲染的结果。复杂一点的话，还可以增加测试事件处理函数调用是否正确。由于逻辑全在MST中，所以事件处理函数完全可以使用mock function，只需要关注mock function是否被正确调用就行了。
优劣
可以看到，应用MST的TDD开发模式是一种不同于常见BDD流程的开发方式。这种开发模式让开发复杂逻辑变得更加独立、可靠，让React UI组件的开发变得更简单、纯粹。重构也因为有测试保证逻辑的正确也更加安全，很多奇怪需求也可以通过测试文件进行记录，看起来开发出的产品确实比传统BDD流程的产出更加可靠。
不过，这种模式也并非全是优点。尽管MST已经把开发测试的负担大幅降低，但是还是存在测试开发的成本。除此之外，如何使用MST分离React app中的逻辑与UI部分也给前端开发增加了新的心智负担。在MST开发action再将action根据产品的功能串起来也是一个新坑点。
总而言之，我个人感觉配合MST使用TDD的开发方式在日常的工作中值得一试。但是否好用，还得看实际应用中的踩坑结果。有兴趣尝试的同学欢迎留言，一起讨论。
参考资料
TDD开发模式 www.jianshu.com/p/62f16cd4f…
MST TDD开发视频教程 egghead.io/lessons/rea…
本人Github参考项目（需使用CRA template初始化项目） github.com/sherlockwan…
