React项目的UI测试

原文链接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic

测试金字塔，来源于人们将多层结构应用在前端测试领域（如图1）。

对于金字塔的结构众说纷纭，这里采用原作者的观点，并附上一些我在实际项目中所采用的技术栈以及结合一些已有的测试概念：

• 端到端测试：从外部测试整个app。在真实的浏览器或移动设备上运行应用，使用真实的服务端数据。通常情况下，端到端测试都是由组内的专门测试人员进行的（人力测试），此时的app也大都处于生产阶段或者准生产阶段，所用数据都是线上真实数据。
• UI自动化测试：（相关词条： 冒烟测试，黑盒测试，回归测试，集成测试，BDD）从外部测试app的主要模块。一般运行在真是的设备上，使用模拟服务器。前端自动化测试框架很多，这里有一个链接：Top 5 Most Rated Node.js Frameworks for End-to-End Web Testing。CasperJS在渲染React DOM时会有些问题，Protractor是基于Angluar的，配置起来也有些麻烦，所以我在项目中使用了nightmare.js，他会调用eletron虚拟出的浏览器进行自动化测试，并且在项目中我们使用了一个特定进行测试的数据库。
• 组件测试：从内部和UI和业务逻辑集成的测试。通常在node上运行，使用模拟服务器。在我们的项目中，由于使用了facebook的CRA(create react app)，自带了Jest，自带断言库，开箱即用很方便，所以采用了Jest+Enzyme进行组件测试。基本教程网上很多，也可以在Jest和Enzyme的官网上看，有翻译版本。
• 单元测试：（相关词条： 白盒测试，TDD）抛开UI，将项目分割成若干的单元，进行业务逻辑的测试。使用Node运行，并且在每个单元外使用模拟数据。

下面主要说一下组件和单元测试：

由于是基于react+redux+saga的单页应用，每个页面，或者说组件的基本结构分为四部分：sagas储存业务逻辑，index囊括了相关的action和reducer，component只进行UI渲染，container负责链接store和component。所以我采用的测试方案如下：

• sagas: 使用redux-saga-test-plan，模拟generate function，使用模拟数据进行测试，并且使用provider模拟http请求的数据、withReducer同时测试相关的selector、reducer和actions。
• container：使用redux-mock-store模拟redux store以及相应的action和state dispatch匹配测试。
• component: 使用enzyme的shallow和mock props渲染组件（如果是最底层的组件可以用mount来测试react组件的生命周期），使用jest的mock function模拟点击等的动作。
• index：index主要部分已经在sagas和container部分测试过了，详细的测试（我觉得必要性不是很大）可以参考redux的官方测试文档。

在国内一般的开发团队都有专门的测试人员，但是在国外比较小的团队就不会有。所以在开发同时不断更新测试代码也是很有必要的。

这是几个月来在测试方面的一些个人理解，如有不对或不够细致的地方还请大家指正。