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

Question

我一直在使用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，纱线似乎已经成功，但它没有列在我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"
  ]
}

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

Answer 1

在github 问题“New Cypress 10 global TypeScript type因 Jest Expect 冲突”中遇到此问题的任何人都有一个解决方法

通过排除./cypress.config.ts您的tsconfig.json

"exclude": [
  "./cypress.config.ts",
  //other exclusions that may help https://github.com/cypress-io/cypress/issues/22059#issuecomment-1428298264
  "node_modules",
  "cypress",
  "**/*.cy.tsx"
]

来自赛普拉斯开发者：

对于 v10，我们没有对全局变量进行太大改变。对于我重现的所有案例，它是通过将 ./cypress.config.ts 添加到 tsconfig.exclude 属性来修复的。由于 cypress.config.ts 包含在类型检查中，因此它正在加载 cypress 类型，这会污染您的玩笑测试。

Answer 2

终于我找到了解决方案！只需添加"cypress"到exclude您的 main 的属性中tsconfig.json：

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

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

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

Answer 3

我昨天遇到了这个问题。看来你说的是对的，cypress 和 jest 都声明了expect. 在这种情况下，cypress 声明似乎是被选中的声明。这是 cypress repo 中关于此问题的一个问题：

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

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

tsconfig.json：

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

tsconfig.spec.json：

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

有了这个，我的（angular 8）应用程序编译得很好，我可以毫无问题地运行 jest 测试。这是问题中提到的另一个示例，其中正在实施类似的修复：

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

Answer 4

这在我的 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"
  ]
}

Answer 5

有一个官方的 Cypress repo 展示了如何解决这个确切的问题https://github.com/cypress-io/cypress-and-jest-typescript-example

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

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

Answer 6

有多种情况会导致此问题。就我而言，它是通过将 ./cypress.config.ts 添加到 tsconfig.exclude 属性来修复的。由于 cypress.config.ts 包含在类型检查中，因此它正在加载 cypress 类型，这会污染您的玩笑测试。我相信如果您使用 Typscript 进行 cypress 配置，它会对您有所帮助。

Answer 7

可以通过三个步骤让它消失。

1. 在您的/cypress/目录中添加tsconfig.json.

2. 粘贴以下内容，如本示例所示：

   {
       "extends": "../tsconfig.json",
       "compilerOptions": {
          "noEmit": true,
          "types": ["cypress"]
       },
       "include": [
           "../node_modules/cypress",
           "./**/*.ts"
       ]
   }
   

3. 在你原来的 tsconfig.json添加

   {
     ...
     "exclude": ["cypress"]
     ...
    }
   

到顶层配置。就是这样。

一些额外的注意事项：

1. 如果您cypress/tsconfig.json抱怨，include, exclude您可能需要覆盖它们的值，因为它们是从原始文件继承的。就我而言添加

   "exclude": [],
   

   ...已经解决了问题。

2. .ts可能很简单，但请记住从现在开始使用适合您规范的文件扩展名。

Answer 8

解决此问题的最简单方法是将以下行添加到 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
  }
}