赛普拉斯在开玩笑断言中导致类型错误答案

【问题标题】：Cypress causing type errors in jest assertions赛普拉斯在开玩笑断言中导致类型错误
【发布时间】：2020-03-18 19:29:06
【问题描述】：

我一直在使用react-testing-library 和@testing-library/jest-dom/extend-expect。我昨天安装了 Cypress，现在我的所有玩笑匹配器都出现 Typescript 错误：

Property 'toEqual' doesn't exist on type 'Assertion'. Did you mean 'equal'?

它看起来像是从错误的断言库中获取expect 的类型还是什么？此外，expect(...).to.equal(...) 也不起作用。

我实际上尝试安装@types/jest，yarn 似乎已经成功，但它没有在我的package.json 的devDependencies 中列出。

这是我的tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react",
    "skipDefaultLibCheck": true,
    "types": [
      "node",
      "cypress",
      "jest"
    ]
  },
  "include": [
    "src"
  ]
}

我还要提一下，我在 cypress 测试中的所有 cy 调用都从 ESLint 收到 cy is not defined 错误。

【问题讨论】：

标签： typescript jestjs cypress

【解决方案1】：

我昨天遇到了这个问题。您所说的似乎是正确的，cypress 和 jest 都声明了 expect 的类型。在这种情况下，柏树声明似乎是被选中的声明。这是 cypress repo 中关于此的一个问题：

https://github.com/cypress-io/cypress/issues/1603

那里提到的解决方案对我有用。您需要从 tsconfig.json 中排除 jest 规范文件，然后声明 tsconfig.spec.json 再次明确包含它们。

tsconfig.json：

{
  ...,
  "exclude": [
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json：

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.spec.ts"
  ],
  ...
}

有了这个，我的 (angular 8) 应用程序都可以正常编译，并且我可以毫无问题地运行笑话测试。这是问题中提到的另一个示例，正在实施类似的修复：

https://github.com/neiltownsley/react-typescript-cypress/pull/1/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R29

【讨论】：

你是指 Cypress .spec 文件吗？
@foakesm 抱歉，如果上面的文字不清楚。基础 tsconfig.json 排除 jest .spec 文件，然后 tsconfig.spec.json（jest 使用）包含它们。为此，我们假设您的赛普拉斯测试不在名为 *.spec.ts 的文件中。这能回答你的问题吗？

【解决方案2】：

有一个官方的赛普拉斯回购展示了如何解决这个确切的问题https://github.com/cypress-io/cypress-and-jest-typescript-example

我无法在我的一个项目中使用该方法，因此我将其用作解决方法：

import { expect } from '@jest/globals';

【讨论】：

我已经关注了赛普拉斯官方回购。感谢您的链接。

【解决方案3】：

这在我的 tsconfig.json 中对我有用

我必须添加

  "include": ["src/**/*"],

完整代码在这里

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports" : true,
    "esModuleInterop" : true,
    "sourceMap": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

【讨论】：

这对我来说也是关键。在查看示例 repo 中的其他设置后，在根 tsconfig.json 中添加 src/** 解决了它：github.com/cypress-io/cypress-and-jest-typescript-example。

【解决方案4】：

我终于找到了解决方案！只需将"cypress" 添加到主tsconfig.json 的exclude 属性即可：

{
  ...YOUR_CONFIGS,
  "compilerOptions": {
    ...YOUR_CONFIGS,
    "typeRoots": [ // THIS TO GET ALL THE TYPES
      "node_modules/@types"
    ],
  },
  "exclude": ["cypress"], 
}

您还应该为您的 cypress 测试添加另一个 tsconfig.json。您可以创建一个 cypress 文件夹并在其中添加 tsconfig.json。以下是我的赛普拉斯tsconfig.json：

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["./**/*.ts"]
}

【讨论】：

exclude:[cypress] 的好建议，对我有用。

【解决方案5】：

解决这个问题最简单的方法是在 tsconfig.json 中添加这一行：

  "include": [
    "src/**/*.ts"
  ],

我附上我的 tsconfig 文件以便更好地理解。您可以在第 3-5 行看到添加内容。

{
  "compileOnSave": false,
  "include": [
    "src/**/*.ts"
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

【讨论】：

【解决方案6】：

就我而言，它只有助于一件事：将"types": ["jest"] 添加到"compilerOptions"：

{
  "compilerOptions": {
    ...
    "types": ["jest"],
   ...
  },     
}

【讨论】：

【解决方案7】：

我今天也遇到了这个问题 - 是什么导致我的 Cypress 文件夹从 / 移动到 src/test。我将其移回以避免冲突。

【讨论】：

【解决方案8】：

我在 cypress + jasmine 上遇到了同样的问题，但没有任何帮助。

最后，我复制了 jasmine expect 声明并将其放入新文件 /test/global.d.ts：

declare function expect<T>(actual: T): jasmine.Matchers<T>;

可能值得一提的是，在我的tsconfig.json 中，该文件夹明确包含如下：

{
    "include": ["test/**/*", ...]
}

这导致可怕的柏树再次出现阴影，并使编译器保持沉默。

【讨论】：

【解决方案9】：

我遇到了同样的问题，在尝试了上述选项后，两种解决方案的组合奏效了。在测试文件中添加以下内容

import { expect } from '@jest/globals';.

还有这个到 tsconfig.json（包括停止开玩笑@types 错误）

{ "include": [
    "**/*.spec.ts"
  ] 
}

【讨论】：