2018年10月storybook发布了4.0版本，在UI层支持、构建、移动端、stroy参数等多个方面进行了升级优化。本文已React的UI组件为例，演示如何新建/集成Storybook到项目中，并对UI组件进行全方位的管理，包括发布、demo文档、测试等。
一名好的大前端开发人员，一定是一名好的“配置工程师”（滑稽脸）。而最近刚到团队，被安排给 vemoJS 和 cloudbase-cli 写测试用例，并且要保证覆盖率！
2019 年前端测试依然是一个炙手可热的话题。笔者在今年 5 月份参加 Vueconf 的时候，Vue 单元测试的主题演讲者曾向现场的参与者发出提问，有多少团队引入了单元测试，意外的是只有寥寥数人举起了手。尽管，那个时候笔者的团队也还没有引入前端测试，但是考虑到测试的必要性，且团队正在着手一个新项目，所以回去之后在这个新项目全量地接入了前端测试。
继上一篇探索----面向单元测试编写React组件之后，笔者开始探索如何能保证我们播放中的落地页进行高质量的产品迭代。 先来体验一下我们的业务，目前我们的平台每天会服务于广告主制作各种各样的落地页，那么我们希望在发布新功能的同时，同时能够快速验证老的特性能够不受影响。 那么为了完成这个目标，我们可以让测试同学回归下本次修改可能涉及到的特性，来确保功能的正常，
https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md
蹊径落地页是AMS推出的帮助广告主快速、便捷创作落地页的平台工具。平台希望在发布新功能的同时，同时能够快速验证老的特性能够不受影响。
在携程的日常Web开发生命周期中，本地代码开发阶段可通过NFES框架（携程内部一个支持SSR框架，其中还包含许多公共基础业务模块及UI组件）来快速完成项目需求。但开发完代码之后常常会遇到如下几点问题：
单元测试的技术方案很多，不同工具之间有互相协同，也存在功能重合，给我们搭配测试方案带来不小的困难，而且随着 ES6, TypeScript 的出现，单元测试又增加了很多其他步骤，完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握，了解完整的前端测试技术方案。前端单元测试的领域也很多，这里主要讲对于前端组件如何进行单元测试，最后会主要介绍下对于 React 组件的一些测试方法总结。
| 导语 本文主要介绍在前端工程化的一些探索和实践，结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。
如果你的项目要长期使用并维护的话，那么代码自动测试就非常有必要使用。因为没人能保证在修改代码后，不会引发其他额外 bug（功能失效，渲染失败），而在修改完代码后，跑一遍测试就能很大程度让开发者发现自己所修改的代码是否存在问题，是否会导致原有功能失效。
从使用 Vue 写出第一个 Hello world 到现在已经有近两年时间了，期间利用业余时间折腾了一套组件 we-vue，起初是出于实践学到的新知识，更多的是玩的意思，不过后来维护的过程中渐渐积累了一些经验，并开始享受这种过程。 在 we-vue 更新到 v2.0 的时候，开始全面地编写单元测试。起先使用 karma + mocha + chrome-headless 这种组合完成的行级覆盖率达到 96% 的测试。但最近，我又放弃了这种组合，转而使用 Jest。在这连番的折腾中，入过不少坑（当然，很多时
Leo Li，携程高级软件工程师，负责度假 BDD-Test UI 自动化测试框架的研发、维护和迭代等工作。
随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 HTML 的内容分析也有无数的用例。
执行 yarn jest 或者 yarn jest test/plus.spec.js 运行测试用例
英文 | https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8
在这里，我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览，我还对它们进行了分类，希望呈现出更加清晰的结构。
一般项目代码中会有不少异步 ajax 请求，例如测试下面 async.js 中的代码
在技术术语中测试意味着检查我们的代码是否符合某些预期。例如：给定一些输入，一个名为“transformer”的函数应返回预期的输出。
在这里，我整理了一些我最喜欢的 NPM 包的列表。我也将它们分类，因此信息更加结构化，更易于浏览。
页面对象模型(Page Object Model)是一种设计模式,用于表示网页中的对象。在Playwright中,我们可以通过Page对象的Query Selector API 查找页面元素,并用它们创建页面对象模型。
尤雨溪在多伦多的演讲《Vue 3.0 设计原则》对于想要学习 Vue3.0 或者想要直接从零开发 Vue3.0 的人来说，绝对是必读的。PPT 内容不多，几分钟就可以读完，不建议看视频，视频大概有 50 多分钟。
后端自动化：Cypress、Soup UI、Karateframework、Postman / Newman、REST Assured；
随着业务的不断扩展，团队的项目越来越多，面对日益复杂的业务场景和代码逻辑，我们发现在前端工程化方面团队还停留在非常原始的阶段。现有的解决方案已经无法满足各种复杂的场景，我们每天都在疲于应付很多重复的工作，为此我们基于移动端基础库重构和UI组件库的建设这两个项目对团队的项目构建流程进行了详细的分析和梳理，并制定了一套适用于团队的工程化方案。
顾翔老师开发的bugreport2script开源了，希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript，
端到端测试指的是将系统作为一个黑盒，模拟正常用户行为，跨越从前端到后端整个软件系统，是一种全局性的整体测试。
点击上方蓝字关注我们！ | 导语 持续集成强调开发人员提交了新代码之后，立刻进行构建、测试。根据测试结果，确定新代码和原有代码能否正确地集成在一起。本文介绍了腾讯文档项目中自动化测试在持续集成中的实践。 背景 腾讯文档自动化测试种类较多。包括了：单元测试，bvt测试，集成测试(包括了基于接口输入输出进行验证的端到端测试和Web端API接口测试)，e2e测试（UI触发UI验证的界面自动化测试）以及性能测试。 测试代码编写语言，使用框架种类较多。由于大部分前端测试框架单元测试与e2e测试相互独立，所以
作者 | kinkahuang 链接 | http://imweb.io/topic/592aab6eff03ef1a4ef15c51 最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。那这时候问题来了，有些修改， 我们会以为很简单，从而放松警惕，偷懒也罢，没有精力也罢，简单验证之后便匆匆发布了。此时，有可能不经意的改动对其它功能造成了影响，bug复bug， bug何其多
微信小程序生态日益完善，很多小程序项目页面越来越多，结构越来越复杂，业务逻辑也更加多样。以腾讯课堂小程序为例，目前腾讯课堂小程序部分页面结构和不同业务场景下的表现如下图所示：
本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 一、缘起-为什么要进行小程序自动化测试 微信小程序生态日益完善，很多小程序项目页面越来越多，结构越来越复杂，业务逻辑也更加多样。以腾讯课堂小程序为例，目前腾讯课堂小程序部分页面结构和不同业务场景下的表现如下图所示： 可以看到在核心功能上主要页面对于不同业务场景有众多不同的表现，因此在开发与发布的过程中需要手动验证大量测试用例以保证小程序按预期表现运行，善于利用工具的程序员当然会想： 这种重
最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。那这时候问题来了，有些修改， 我们会以为很简单，从而放松警惕，偷懒也罢，没有精力也罢，简单验证之后便匆匆发布了。此时，有可能不经意的改动对其它功能造成了影响，bug复bug， bug何其多呀。
前言从敏捷：团队和企业的高响应力谈到单元测试，可能有同学会问，高响应力这个事情我认可，也认可快速开发的同时，质量也很重要。但是，为了达到“保障质量”的目的，不一定得通过测试呀，就算需要测试，也不一定得通过单元测试。
最近的几次发布都犯了小错，都是缺乏或者忽视了测试所导致的。通常来说，一个新功能上线的时候，开发和测试都投入比较多，各项测试都是比较全面的。然而，发布上线也并非意味着不再有bug或者修改。那这时候问题来
puppeteer: Google 官方出品的 headless Chrome node 库 puppeteer github仓库 puppeteer API
最近一年多一直在做前端的一些测试，从小程序到店铺装修，基本都是纯前端的工作，刚开始从后端测试转为前端测试的时候，对前端东西茫然无感，而且团队内没有人做过纯前端的测试工作，只能一边踩坑一边总结经验，然后将容易出现问题的点形成体系、不断总结摸索，最终形成了目前的一套前端测试解决方案。在此，将有赞的前端质量保障体系进行总结，希望和大家一起交流。
Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome。Chrome 素来在浏览器界稳执牛耳，因此，Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用 Puppeteer，相当于同时具有 Linux 和 Chrome 双端的操作能力，应用场景可谓非常之多。
注意：这里我们使用cnpm去安装速度会更快，npm速度会很慢！ a.建议使用npm install –g jest(不需要单个去安装依赖)，修改package.json文件即可。
前端开发的一个特点是更多的会涉及用户界面，当开发规模达到一定程度时，几乎注定了其复杂度会成倍的增长。
关于Jest测试的基础内容，可以参考之前的博客：前端单元测试之Jest 本文主要讲的是匹配器（Matchers），匹配器（Matchers）是Jest中非常重要的一个概念，它可以提供很多种方式来让你去验证你所测试的返回值，本文重点介绍几种常用的Matcher，其他的可以通过官网api文档查看。
最受欢迎项目 下面是年度最流行的项目，不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军，今年在 GitHub 上新增了超过 40,000 的 star。 相较于 2016
在上一篇文章当中我们介绍了单元测试的意义，以及为何选择 Facebook 的 Jest 作为我们的测试框架。现在就让我们一起来学习如何编写最基础的单元测试。
在上一篇教程中，我们已经介绍了使用 Enzyme 测试 React 组件的基本知识。今天，我们将更深入地挖掘并学习如何测试组件的 Props，如何（以及为什么）使用 mount 函数，以及什么是 Jest 快照测试。
在React为什么需要Hook中我们探讨了React为什么需要引入Hook这个属性，在React Hook实战指南中我们深入了解了各种Hook的详细用法以及会遇到的问题，在本篇文章中我将带大家了解一下如何通过为自定义hook编写单元测试来提高我们的代码质量，它会包含下面的内容：
关于前端单元测试，其实两年前我就已经关注了，但那时候只是简单的知道断言，想着也不是太难的东西，项目中也没有用到，然后就想当然的认为自己就会了。
琨玮，携程高级前端开发工程师，从事React Native/Web前端的开发及维护工作，喜欢研究新技术。
随着前端的发展，web的交互越来越复杂，自动化测试是非常有必要融入到开发的流程中，而目前界内普遍通用且比较火的就是有 facebook开发的 Jest 这套工具。他可以创建测试用例，执行测试，自身还有驱动和mock，且用起来也是很方便，正如 jest 的官网这样描述 jest，Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
作为一个以 文档丰富 而广为人知的前端开发框架， Vue.js 的官方文档中分别在《教程-工具-单元测试》、《Cookbook-Vue组件的单元测试》里对 Vue 组件的单元测试方法做出了介绍，并提供了官方的单元测试实用工具库 Vue Test Utils；甚至在状态管理工具 Vuex 的文档里也不忘留出《测试》一章。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
