Sign in Subscribe

tutorial

前端单元测试实战：React + Redux Testing Library

PPT 内容: https://jimmylv.gitee.io/slides/react-test 为什么要有单元测试？ 走 🚶 vs 🏃 跑 写不好是能力问题，不写则是态度问题。 单元测试客观上可以让开发者的工作更高效，React 应用的单元测试是一定要的。 单元测试的上下文 谈任何东西都一定要有个上下文。你的论述不能是「因为单元测试有这些好处，所以我们要做单元测试」，而应该是「不做单元测试我们会遇到什么问题」，这样才能回答「为什么要写单元测试」的问题。那么我们谈论单元测试的上下文是什么呢？不做单元测试我们会遇到什么问题呢？上图为一个产品从 idea 分析、设计、开发、测试到交付并获取市场反馈的过程。 缩短反馈周期 而单元测试的上下文就是存在于「敏捷」当中。敏捷为的是更快地交付有价值的可工作的软件。为此，它有一个指标来度量这个「更快」，那就是 lead time，它度量的是一个 idea 从提出被验证，到最终上生产环境面对用户的时间。
吕立青

Vue 应用单元测试的策略与实践 06 - 如何落地的几点建议

本文的目标 1. 在 Vue 项目中如何推动整个团队循序渐进地采取单元测试策略？逐步提高代码质量和测试覆盖率？ // Given 一个需要在团队中推行测试策略的 Tech Lead👨‍💻‍ // When 当他 🚶 阅读本文的 Vue 应用测试策略落地部分 // Then 他能够在团队中循序渐进地推行测试策略， 他能够找到单元测试的反馈机制，追求技术卓越 Vue 应用测试策略的落地 1. 利用好“单元测试是一种政治正确” 谈到如何推进单元测试的落地，首先得要有一个开始。很多公司都在推行 OKRs 或者 KPI 机制，而技术部门如何衡量技术性的绩效呢？说实话，我们都知道技术类绩效其实不好用某些指标来衡量，但很多时候老板们都会道听途说觉得软件质量特别重要，然后大家开始用测试覆盖率来作为考核标准，先随便定个数吧，就 80% 不错。但我们都知道，哪怕 100% 测试覆盖率也无法保证软件质量，盲目追求高覆盖率反而会物极必反出现问题，最终导致大家以后对单元测试痛恨至极。 但正因为有了这样一个开始的契机，大家才开始有意识提高软件质量。而且大家最开始都会觉得“单元测试是个好东
吕立青

Vue 应用单元测试的策略与实践 05 - 测试奖杯策略

本文的目标 1. Vue 项目中测试收益如何最大化，如何配置高性价比的测试策略，即什么地方最该花力气测试，什么地方又可以暂且放一放？ // Given 一个具备 UT 基础但找不到着力点的求索之徒 🐒 // When 当他 🚶 阅读本文的 Vue 应用测试策略部分 // Then 他能够找到测试的重点，重新燃起对 UT 的热情 🔥 他能够在项目背景下合理配置单元测试的测试策略 单元测试的特点及其位置 前言从敏捷：团队和企业的高响应力谈到单元测试，可能有同学会问，高响应力这个事情我认可，也认可快速开发的同时，质量也很重要。但是，为了达到“保障质量”的目的，不一定得通过测试呀，就算需要测试，也不一定得通过单元测试。 这是一个好的问题。为了达到保障质量这个目标，测试当然只是其中一个方式，稳定的自动化部署、集成流水线、良好的代码架构、甚至于团队架构的必要调整等，都是必须跟上的基础设施。自动化测试不是解决质量问题的银弹，多方共同提升才可能起到效果。 即便我们谈自动化测试，也未必全部都是单元测试。我们对自动化测试套件寄予的厚望是，它能帮我们安全重构已有代码、
吕立青

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

本文的目标 2.2 在 Vue 应用的单元测试中，对 Vuex store 该如何测试？如何测试与 Vue 组件之间的交互？ // Given 一个有基本的 UT 知识和 Vue 组件单元测试经验的开发者 🚶 // When 当他 🚶 阅读和练习本文的 Vuex 单元测试的部分 // Then 他能够对 Vuex 概念的理解更加深入，且知道 `Redux-like` 架构的好处 他能够合理测试 vuex store 的 mutation、getter 中的业务逻辑和异步 action 他能够测试组件如何正确读取 store 中的 state 以及 dispatch action 如何理解 Vuex 模式？ Vuex
吕立青

Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试

本文的目标 2.1 在 Vue 应用的单元测试中，对不同 UI 组件的单元测试有何不同？颗粒度该细到什么样的程度？ // Given 一个有基本的 UT 知识但没写过 Vue 测试的新人 🚶 // When 当他 🚶 阅读和练习本文的 Vue 单元测试的部分 // Then 当然，他能够学会 Vue 组件在测试当中的几种渲染方式 他能够学会 UI 组件的分类，特别是交互行为的测试方式 组件化与 UI 测试 在组件化出现之前，我们都压根不谈 UI 的单元测试，哪怕是对于 UI 页面层级的测试来说都是一件非常困难的事情。其实组件化并不全是为了复用，很多情况下也恰恰是为了分治，从而我们可以分组件对 UI 页面进行开发，然后分别对其进行单元测试。 前端组件化已经让 UI 测试变得容易很多，每个组件都可以被简化为这样一个表达式，
吕立青

Vue 应用单元测试的策略与实践 02 - 单元测试基础

本文的目标 1. 在 TDD 做完 Tasking 列完实例化数据之后，完全没有 UT 基础不知道该怎么写单元测试？ // Given 一个完全没有 UT 基础的新人 🚶 // When 当他 🚶 阅读和练习本文的 Jest 的部分 // Then 他能够把 Given/When/Then 的套路学会 他能够学会 Jest 的基本用法，包括测试 suite 和断言等语法 他能够学会 Jest 中测试异步的几种方式 单元测试基础 在上一篇文章当中我们介绍了单元测试的意义，以及为何选择 Facebook 的 Jest 作为我们的测试框架。现在就让我们一起来学习如何编写最基础的单元测试。 如果你已经有了使用 Jest 编写单元测试的经验，可以选择直接跳到第二段。 第一个 Jest 实例 首先创建
吕立青

Vue 应用单元测试的策略与实践 01 - 前言和目标

前言 本文主要尝试解决三个问题： 1. 在 TDD 做完 Tasking 列完实例化数据之后，完全没有 UT 基础不知道该怎么写单元测试？ 2. 在 Vue 应用的单元测试中，对 UI 组件和 vuex store 等测试的区别有何不同？颗粒度该细到什么程度？ 3. Vue 项目中测试收益如何最大化，如何配置高性价比的测试策略，即什么地方最该花力气测试，什么地方又可以暂且放一放？ 4. 在 Vue 项目中如何推动整个团队循序渐进地采取单元测试策略？逐步提高代码质量和测试覆盖率？ 不谈论的包括： * ATT 验收测试 或 E2E 端到端测试，这个是我想进一步探索的话题，特别是在 TDD 的语境下。#322 * 为什么要 TDD？但是我会讲为什么要 UT 单元测试。测试和
吕立青