微信小程序单元测试攻略

导语

本文作者是腾讯社交增值产品部高级前端工程师林毅雄，对前端开发领域颇有研究。接下来，本文将从测试框架、实战、覆盖率、踩坑等方面分享一下微信小程序的单元测试经验，希望能帮到大家。

1. 为什么写测试

大家先看看A公司与B公司的差距：

从上图可以看出，B公司的单元测试做的比较好，每百行error数也远比A公司项目低。

总体来说，单元测试有以下一些好处：

1.及早发现代码错误，提高代码质量和可维护性

2.代码变更时可以快速进行检查

然而，要做好测试也有一定的困难：

1.花费时间长

2.被测代码包含复杂的环境因素需要处理或模拟、例如使用了storage、调用了接口、使用了环境变量等。

 

（图片来源：码农翻身公众号）

但无论如何，有价值的东西就应该去做，应该要知难而退嘛。

接下来给大家介绍一下测试框架。

2. 微信小程序测试框架：miniprogram-simulate

这是微信小程序自定义组件测试工具集。主要提供以下功能方便测试：

1.模拟 touch 事件、自定义事件触发

2.选取子节点

3.更新自定义组件数据

4.触发生命周期

2.1 架构

（图片来源：掘金技术社区）

2.2 接入

2.2.1安装

// 小程序工具集

$ npm i --save-dev miniprogram-simulate

// Jest测试框架

$ npm i --save-dev jest

2.2.2 在package.json中, 添加测试相关命令

{sd

    ...

    script: {

        "test": "jest --coverage"

    }

    ...

}

2.2.3 添加jest.config.js：

注意 testEnvironment设为 'jsdom'，因为框架使用的是这个环境，如果配错会运行不起来。

// 更多配置查看： https://jestjs.io/docs/zh-Hans/configuration

module.exports = {

  verbose: true,

  modulePathIgnorePatterns: [

    '<rootDir>/dist-wx/',

    '<,rootDir>/node_modules/',

  ],

  // 是否开启自动mock测试文件中导入的文件

  automock: false,

  testRunner: 'jasmine2',

  // 测试文件执行前会先执行该文件，用来给Jest测试函数加代理从而收集测试用例

  setupFilesAfterEnv: ['./node_modules/@tencent/dwt/dist/src/testbase/testbase.js'],

  // 覆盖率报告依赖

  reporters: [

    'default',

    '@tencent/dwt-reporter',

  ],

  // 测试文件匹配规则

  testMatch: [

    '**/__test__/**/*.test.ts?(x)',

  ],

  // 测试覆盖报告文件列表，下面是默认列表

  coverageReporters: ['json', 'lcov', 'text', 'clover'],

  // 全局变量配置