前端测试金字塔使用步骤详解

这次给大家带来前端测试金字塔使用步骤详解，前端测试金字塔使用的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

• 端到端测试：从外部测试整个app。在真实的浏览器或移动设备上运行应用，使用真实的服务端数据。通常情况下，端到端测试都是由组内的专门测试人员进行的（人力测试），此时的app也大都处于生产阶段或者准生产阶段，所用数据都是线上真实数据。

• UI自动化测试：从外部测试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的官网上看，有翻译版本。

• 单元测试：抛开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的官方测试文档。

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Webpack加载模块有哪些方法

小程序保存图片分享到朋友圈功能实现

以上是前端测试金字塔使用步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章！