小程序最佳实践之『单测』篇干货满满！

Posted 2021-05-24 程序员小濠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序最佳实践之『单测』篇干货满满！相关的知识，希望对你有一定的参考价值。

前言：接下来会开启一个小程序最佳实践的知识小册，从小程序作为切入点，但绝不限于此。将涵盖几大篇章『命名篇』、『单测篇』、『代码风格篇』、『注释篇』、『安全生产篇』、『重构篇』、『代码设计篇』、『性能篇』、『国际化篇』和『Why 小程序开发最佳实践』。每一篇都会包含正面和反面示例以及详细的解释。

文中示例都是在 CR 过程中发现的一些典型的问题。希望大家能通过该知识小册提前规避此类问题，让我们的 CR 关注点更多聚焦在业务逻辑而非此类琐碎或基本理念的缺失上而最终形成高质量的 CR。

单测篇 👮

你的代码质量如何度量？你是如何保证代码质量？你敢随时重构代码吗？你是如何确保重构的代码依然保持正确性？你是否有足够信心在没有测试的情况下随时发布你的代码？如果对这些问题没有答案，或者没有 100% 的信心，那你需要给你的代码做单元测试。

—— 来自不四：产品工程师的修炼之路

单测可让开发者提前考虑边界情况，提升代码的鲁棒性（Robustness），同时让自己拥有重构的信心，以及给阅读者迅速理解代码的途径，而且从设计层面来讲可迫使开发者写出无副作用、满足 SRP 原则的『好函数』等好处。

书写规范

【建议】复杂单测应符合以下更具可读性的编码模式：

describe('testFunc', () => {
  it('should do sth when some conditions met', () => {
    const input = 'abc';
    const actual = testFunc(input);
    const expected = 'xyz';

    expect(actual).toEqual(expected);
  });
})
复制代码

Good

describe('splitSubtitle', () => {
  it('正确分隔含金额的副标题', () => {
    const input = '奖励3000元还款额度';
    const actual = splitSubtitle(input);
    const expected = ['奖励', '3000','元还款额度'];

    expect(actual).toEqual(expected);
  });
});
复制代码

Bad

当入参较长则不具备可读性

it('normal src parameter restful url', () => {
  expect(foo('https://mdn.example.com/antmedia/afts/img/A*aafffffffffffff/600w_600h')).toBe('https://mdn.example.com/antmedia/afts/img/A*aafffffffffffff/600w_600h/432w_288h');
});
复制代码

Good

it('should add zoom into path for restful url', () => {
  const input = 'https://mdn.example.com/antmedia/afts/img/A*aafffffffffffff/600w_600h';
  const actual = foo(input);
  const expected = 'https://mdn.example.com/antmedia/afts/img/A*aafffffffffffff/600w_600h/432w_288h';

  expect(actual === expected);
});
复制代码

覆盖率

分为 branches statements line function 下一篇文章在展开细讲。

覆盖率报告

覆盖率是衡量代码质量最直观的一个指标，通过配置覆盖率阈值让线上运行的代码能始终恒稳。一般我们会要求新增的 util 覆盖率达到 99% 以上，增加配置文件，当阈值低于 99%，则测试不通过，以此限制代码质量在历经修改后不会恶化。

jest

有两种方式，通过命令行或配置

// @filename package.json

{
  "scripts": {
    "test": "jest --coverage" // or --collectCoverage
  }
}
复制代码

或通过配置可以写到 package.json 或 jest.config.js

// @filename package.json

{
  "jest": {
    "collectCoverage": true,
  },
}
复制代码

💡 Tips：为了保障下次 util 修改不会导致覆盖率下降，增加阈值配置，当低于 100%，单测将失败，保证代码质量不劣化。

// @filename package.json

{
    "jest": {
    "collectCoverage": true,
+   "coverageThreshold": {
+     "global": {
+       "branches": 100,
+       "functions": 100,
+       "lines": 100,
+       "statements": 100
+     }
+   }
  }
}
复制代码