React 中的 Cypress 组件测试类型？答案

【问题标题】：Cypress Component Test Types in React?React 中的 Cypress 组件测试类型？
【发布时间】：2022-02-15 07:51:25
【问题描述】：

我正在尝试创建一个component test in cypress。我完成了设置，所有基础测试都运行良好。

现在我试着用玩笑来模拟一个函数：

import { mount } from '@cypress/react'

const onDissmis = jest.fn()

describe('Tags', () => {

  describe('Basic', () => {
    mount(<Component onDismiss={onDissmis} />)
  })
})

我还从 VSCode 获得了智能感知：

但是当我尝试运行我得到的代码时：

The following error originated from your test code, not from Cypress.

  > jest is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.

可能 ts 配置是错误的（所以它只是引用我的玩笑，但它没有使用玩笑）也许 mocha？如何配置正确的项目？

这是我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": [
      "cypress"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "craco.config.js",
    "**/*.ts"
  ]
}

【问题讨论】：

标签： javascript reactjs jestjs mocha.js cypress

【解决方案1】：

我不知道如何将 Jest 与 Cypress 一起使用（您也许可以将 Jest 包添加到应用程序中）。

但赛普拉斯有cy.stub()。这行得通吗？

import { mount } from '@cypress/react'

const onDissmis = cy.stub()

describe('Tags', () => {

  describe('Basic', () => {
    mount(<Component onDismiss={onDissmis} />)
  })
})

【讨论】：