如何推断赛普拉斯的正确类型？答案

【问题标题】：How to infer correct types for Cypress?如何推断赛普拉斯的正确类型？
【发布时间】：2021-04-01 06:49:44
【问题描述】：

我有一个 create-react-app 应用程序已退出，因此我可以添加 eslint-plugin-cypress。

我有开玩笑的测试，我也安装了 cypress。

但是，在我的 Cypress 测试中，我的 VSCode Intellisense 类型被推断为 jest 类型，而不是 Cypress / Chai 类型。

// ./cypress/integration/test.spec.js

describe("My test", () => {
  it("runs ok", () => {
    expect(true).to.eq(true);
  });
});

这个“期望”实际上是使用“柴”。

我已将/// <reference types="Cypress" /> 添加到文件顶部，但它仍然不起作用。

【问题讨论】：

你有单独的 tsconfig 用于 cypress 文件吗？
另外请注意，您不需要弹出来添加 ESLint 插件；您可以使用 vanilla CRA 来完成，如果您使用的是版本 4，请参见例如blog.jonrshar.pe/2020/Nov/22/js-tdd-e2e.html 的 linting 部分。
我不确定，但试试import {expect} from 'chai 或import {expect} from 'mocha
@captain-yossarian 这不是必需的

标签： typescript jestjs create-react-app cypress

【解决方案1】：

对我来说，关注文档中的 these instructions 就足够了：

配置 tsconfig.json

我们推荐下面的配置在tsconfig.json里面你的cypress 文件夹。
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

在原版 CRA TS 应用中，cypress/integration/demo.spec.ts 中 it 和 expect 的 VS Code 定义最初是：

var it: jest.It
(name: string, fn?: jest.ProvidesCallback, timeout?: number) => void

const expect: jest.Expect
<boolean>(actual: boolean) => jest.JestMatchersShape<jest.Matchers<void, boolean>, jest.Matchers<Promise<void>, boolean>>

而expect(true).to.eq(true) 显示编译器错误：

Property 'to' does not exist on type 'JestMatchersShape<Matchers<void, boolean>, Matchers<Promise<void>, boolean>>'. ts(2339)

但是一旦我将上述配置添加到cypress/tsconfig.json，定义就变成了：

var it: Mocha.TestFunction
(title: string, fn?: Mocha.Func) => Mocha.Test (+5 overloads)

const expect: Chai.ExpectStatic
(val: any, message?: string) => Chai.Assertion

就 ESLint 而言，请注意，从 CRA 4 开始，配置位于 package.json 中，因此您可以将 Cypress 插件配置为 cypress 文件夹中的文件的覆盖。例如，正如我在this blog post 中展示的使用赛普拉斯测试驱动 CRA 应用程序：

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "extends": [
          "plugin:cypress/recommended"
        ],
        "files": [
          "cypress/**/*.js"
        ]
      }
    ]
  },

【讨论】：