摘要：单元测试相关词条白盒测试，抛开，将项目分割成若干的单元，进行业务逻辑的测试。下面主要说一下组件和单元测试由于是基于的单页应用，每个页面，或者说组件的基本结构分为四部分储存业务逻辑，囊括了相关的和，只进行渲染，负责链接和。
原文链接：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的官方测试文档。
在国内一般的开发团队都有专门的测试人员，但是在国外比较小的团队就不会有。所以在开发同时不断更新测试代码也是很有必要的。
这是几个月来在测试方面的一些个人理解，如有不对或不够细致的地方还请大家指正。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/8814.html
摘要：单元测试相关词条白盒测试，抛开，将项目分割成若干的单元，进行业务逻辑的测试。下面主要说一下组件和单元测试由于是基于的单页应用，每个页面，或者说组件的基本结构分为四部分储存业务逻辑，囊括了相关的和，只进行渲染，负责链接和。 原文链接：Redux Testing Step by Step: A Simple Methodology for Testing Business Logic 测试...
摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...
摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...
摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...
摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...
阅读 5143·2021-11-24 10:25
阅读 2363·2021-11-16 11:44
阅读 3691·2021-10-11 11:09
阅读 3032·2021-09-02 15:41
阅读 3147·2019-08-30 14:14
阅读 2149·2019-08-29 14:10
阅读 2208·2019-08-29 11:03
阅读 998·2019-08-26 13:47
