@@ -55,14 +55,14 @@ published: True
5555
5656一个常见的 Vue 应用会包括这么几个层面：组件、数据管理、Vuex、副作用等等，对于不同的项目应该有一定的适应性。Vue + Vuex 架构中的不同元素有不同的特点，因此即便是单元测试，我们也会有针对性的测试策略：
5757
58- | 架构层级 | 测试内容 | 测试策略 | 解释 |
59- | :----------: | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
60- | action 层 | 1. 是否获取了正确的参数<br />2. 是否正确地调用了 API<br />3. 是否使用了正确的返回值存取回 Vuex 中<br />4. 业务分支逻辑<br />5. 异常逻辑 | 这五个业务点建议 100% 覆盖 | 这个层级主要包含前述 5 大方面的业务逻辑，进行测试很有重构价值 |
61- | mutation 层 | 是否正确完成计算 | 有逻辑的 mutation 要求 100%覆盖率 | 这个层级输入输出明确，又包含业务计算，非常适合单元测试 |
62- | getter 层 | 是否正确完成计算 | 有逻辑的 getter 要求 100%覆盖率 | 这个层级输入输出明确，又包含业务计算，非常适合单元测试 |
63- | component 层 | 是否渲染了正确的组件 | 1. 组件的分支渲染逻辑要求 100%覆盖<br />2. 交互事件的调用参数一般要求 100%覆盖<br />3. 被 connect 过的组件不测 <br /> | 这个层级最为复杂，还是以「代价最低，收益最高」为指导原则进行 |
64- | UI 层 | 组件是否渲染了正确的样式 | 1. 纯 UI 不测<br />2. CSS 不测 | 这个层级以我目前理解来说测试较难稳定，成本又较高 |
65- | utils 层 | 各种辅助工具函数 | 没有副作用的必须 100% 覆盖 | |
58+ | 架构层级 | 测试内容 | 测试策略 | 解释 |
59+ | :----------: | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- |
60+ | action 层 | 1. 是否获取了正确的参数<br />2. 是否正确地调用了 API<br />3. 是否使用了正确的返回值存取回 Vuex 中<br />4. 业务分支逻辑<br />5. 异常逻辑 | 这五个业务点建议 100% 覆盖 | 这个层级主要包含前述 5 大方面的业务逻辑，进行测试很有重构价值 |
61+ | mutation 层 | 是否正确完成计算 | 有逻辑的 mutation 要求 100%覆盖率 | 这个层级输入输出明确，又包含业务计算，非常适合单元测试 |
62+ | getter 层 | 是否正确完成计算 | 有逻辑的 getter 要求 100%覆盖率 | 这个层级输入输出明确，又包含业务计算，非常适合单元测试 |
63+ | component 层 | 是否渲染了正确的组件 | 1. 组件的分支渲染逻辑要求 100%覆盖<br />2. 交互事件的调用参数一般要求 100%覆盖<br />3. 连接 vuex store 的容器组件不测 <br /> | 这个层级最为复杂，还是以「代价最低，收益最高」为指导原则进行 |
64+ | UI 层 | 组件是否渲染了正确的样式 | 1. 纯 UI 不测<br />2. CSS 不测 | 这个层级以我目前理解来说测试较难稳定，成本又较高 |
65+ | utils 层 | 各种辅助工具函数 | 没有副作用的必须 100% 覆盖 | |
6666
6767### Component 的测试标准
6868
@@ -82,12 +82,12 @@ published: True
8282
8383总结一下，其实每种组件都要测** 渲染分支** 和** 事件调用** ，跟组件类型根本没必然的关联…
8484
85- | 组件类型 / 测试内容 | 分支渲染逻辑 | 事件调用 | ` @connect ` | 纯 UI |
86- | :-----------------: | :----------: | :------: | :--------: | :--- : |
87- | 展示型组件 | ✅ | ✅ | – | ❌ |
88- | 容器型组件 | ✅ | ✅ | ❌ | ❌ |
89- | 通用 UI 组件 | ✅ | ✅ | – | ❌ |
90- | 功能型组件 | ✅ | ✅ | ❌ | ❌ |
85+ | 组件类型 / 测试内容 | 分支渲染逻辑 | 事件调用 | 纯 UI |
86+ | :-----------------: | :----------: | :------: | :---: |
87+ | 展示型组件 | ✅ | ✅ | ❌ |
88+ | 容器型组件 | ✅ | ✅ | ❌ |
89+ | 通用 UI 组件 | ✅ | ✅ | ❌ |
90+ | 功能型组件 | ✅ | ✅ | ❌ |
9191
9292## 单元测试的 F.I.R.S.T 原则
9393
0 commit comments