如何为Cypress v10+TypeScript配置chai-subset插件及实现代码补全

配置步骤 #

1. 在支持文件中注册插件 #

Cypress v10的测试支持文件分两种场景：

• 端到端测试：默认路径为 cypress/support/e2e.ts
• 组件测试：默认路径为 cypress/support/component.ts

在对应文件中添加以下代码，完成chai-subset的注册：

import chai from 'chai';
import chaiSubset from 'chai-subset';

chai.use(chaiSubset);

2. 配置TypeScript类型识别 #

修改Cypress专属的cypress/tsconfig.json文件，在compilerOptions.types数组中加入chai-subset，让TypeScript识别插件的类型定义：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "chai-subset"]
  },
  "include": ["**/*.ts"]
}

如果项目根目录的tsconfig.json也需要识别该类型，同样在其compilerOptions.types中添加chai-subset即可。

VSCode代码补全支持 #

完成上述配置后，VSCode就能自动识别chai-subset的类型定义，实现代码补全功能。比如编写测试断言时，输入expect(obj).to.后，VSCode会提示containSubset等chai-subset提供的断言方法。

若补全未生效，可检查VS右下角的TypeScript版本，确保使用的是项目本地安装的TypeScript版本（而非VSCode内置版本）。

内容的提问来源于stack exchange，提问作者koral