集成测试 Cypress 配置

之前小伙伴写了一个性能上报的 SDK，近期做重构了之后要兼容 script import 方式的引入，同时还要引入 Google 新推出的性能衡量指标，肉眼可见随着该项目的发展，项目体积、文件数量都会与日俱增。在此大背景下，我尝试了 Cypress 添加了集成测试。

单元测试 & 集成测试

单测集中于系统内部各个子模块的健壮，而集成测试则侧重于项目的整体运行状况。特别是某些模块依赖于环境（浏览器），虽然单测也可以做，但是比较麻烦，需要宿主环境下的必要参数，比如需要 performance api。涉及到要去模拟发送请求这种操作，依我自身的理解更偏向用集成测试去完成。

基础配置

基于 Vue 创建的工程，其测试模块的配置简洁、清楚，因此我移植了对应的目录结构并做了删减配置。

代码语言：javascript复制

tests
├── e2e
│   ├── coverage
│   │   ├── clover.xml
│   │   ├── coverage-final.json
│   │   ├── coverage-summary.json
│   │   ├── lcov-report
│   │   └── lcov.info
│   ├── plugins
│   │   └── index.js
│   ├── specs
│   │   └── config.js
│   └── support
│       ├── commands.js
│       └── index.js
└── unit
    ├── coverage
    │   ├── clover.xml
    │   ├── coverage-final.json
    │   ├── lcov-report
    │   └── lcov.info
    ├── helper.spec.js
    └── index.spec.js

Cypress 的安装此处略过，需要配置一下对应的文件路径，否则在启动后默认会在根目录创建。在项目根目录创建 cypress.json

代码语言：javascript复制

{
  "baseUrl": "http://localhost:3000",
  "fileServerFolder": "./tests/e2e/",
  "integrationFolder": "./tests/e2e/specs/",
  "pluginsFile": "./tests/e2e/plugins/",
  "supportFile": "./tests/e2e/support/",
  "fixturesFolder": "false"
}

覆盖率配置

Cypress 需要 @cypress/code-coverage/task 和 @cypress/code-coverage/support来支持覆盖率报告输出。

代码语言：javascript复制

//tests/e2e/support.js

import '@cypress/code-coverage/support'

代码语言：javascript复制

// tests/e2e/plugins/index.js

module.exports = (on, config) => {
    require('@cypress/code-coverage/task')(on, config)
    return config
};

除此之外还剩 babel-plugin-istanbul插件没有配置了，这个插件用于标记代码，但是不会输出文件，没有安装，或者配置错的话，Cypress 会提示:

代码语言：javascript复制

⚠️ Could not find any coverage information in your application by looking at the 
window coverage object. Did you forget to instrument your application? See 
code-coverage#instrument-your-application [@cypress/code-coverage]

安装之后在 .babelrc中添加配置：此处仅需关注 istanbul 的配置，在 env 的层级下，因为我们只需要在测试环境使用到。

代码语言：javascript复制

{
  "env": {
    "development": {
      "plugins": ["istanbul"]
    }
  },
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

最后在 package.json的 scripts 中添加启动命令：

代码语言：javascript复制

 "test:e2e": "cross-env NODE_ENV=test cypress open"

NODE_ENV 使用后，上述 .babelrc 的配置才能生效，cross-env 这个是一个库，用于跨平台设置命令。

收尾

上述配置完，启动测试用例后，会自动生成覆盖率报告，但是在项目根目录生成。因为还缺 nyc的配置….（为了跑起一个集成测试，就要配置这么多东西，确实繁琐，如果考虑到性价比的话，新手上来着实繁琐。）

nyc 又是什么，仅仅是我们安装 babel-plugin-istanbul依赖的时候引入的一个命令行工具，用于在命令行中可视化输出覆盖率。就是下面