Cypress应用

Cypress组件测试

info

你将学习到

如何为React、Angular、Vue或Svelte设置组件测试
如何编写第一个组件测试
如何运行组件测试

假设你已经成功安装Cypress并打开Cypress，现在该设置组件测试了。

Cypress应用将引导你完成项目配置。

配置组件测试

支持的框架

Cypress目前官方支持以下框架的挂载库： React、 Angular、 Vue和 Svelte，并支持以下开发服务器和框架：

框架	UI库	打包工具
React with Vite	React 18-19	Vite 4-6
React with Webpack	React 18-19	Webpack 4-5
Next.js 14-15	React 18-19	Webpack 5
Vue with Vite	Vue 3	Vite 4-6
Vue with Webpack	Vue 3	Webpack 4-5
Angular	Angular 17-19	Webpack 5
Svelte with Vite Alpha	Svelte 5	Vite 4-6
Svelte with Webpack Alpha	Svelte 5	Webpack 4-5

以下集成由Cypress社区成员构建和维护。

框架	UI库	打包工具
Qwik 社区版	Qwik	Vite
Lit 社区版	Lit	Vite

选择测试类型

首次运行Cypress时，应用会提示你设置端到端测试或组件测试。点击"组件测试"开始配置向导。

info

有关如何选择测试类型的更多信息，推荐阅读测试类型指南

选择组件测试

项目设置

项目设置界面会自动检测你的框架和打包工具。本例中我们将使用React和Vite。点击"下一步"继续。

自动检测到React和Vite

安装依赖

下一界面会检查所有必需依赖是否已安装。所有项目都应显示绿色复选框，表示一切就绪，点击"继续"。

所有必要依赖已安装

配置文件

接着，Cypress会生成所有必要的配置文件，并列出对项目所做的所有更改。点击"继续"。

Cypress启动器将为你生成所有这些文件

选择浏览器

完成组件测试设置后，你将进入浏览器选择界面。

选择你喜欢的浏览器，点击"开始组件测试"按钮打开Cypress应用。

选择你的浏览器

编写第一个测试

此时，你的项目已配置为使用Cypress组件测试。但当应用打开时，它不会找到任何测试文件，因为我们还没有创建任何测试。现在我们需要编写第一个组件测试。

Cypress应用界面显示'创建第一个测试文件'页面，包含'从组件创建'和'创建新测试'按钮

框架支持

Cypress目前官方支持以下框架的挂载库： React、 Angular、 Vue和 Svelte。除了官方支持的框架外，还有许多社区插件，如 Qwik和Lit。

第一个组件测试

虽然每个框架都有其独特之处，但编写测试的方式非常相似。让我们看看如何为StepperComponent编写基本测试。

假设步进器组件包含两个按钮，一个用于减少计数器值，另一个用于增加计数器值，以及一个span标签显示当前计数器值。

info

要查看各框架中步进器组件及其测试的示例，请访问我们的组件测试快速入门应用仓库

React
Angular
Vue
Svelte

import React from 'react'
import Stepper from './Stepper'

describe('<Stepper />', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(<Stepper />)
  })
})

import { StepperComponent } from './stepper.component'

describe('StepperComponent', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-angular
    cy.mount(StepperComponent)
  })
})

import Stepper from './Stepper.vue'

describe('<Stepper />', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-vue
    cy.mount(Stepper)
  })
})

import Stepper from './Stepper.svelte'

describe('Stepper', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-svelte
    cy.mount(Stepper)
  })
})

测试解析

让我们分解这个测试文件。首先，我们导入Stepper组件。然后，使用describe和it函数组织测试，这些函数允许我们使用方法块将测试分组。这些是Cypress提供的全局函数，意味着你不需要直接导入它们。顶层的describe块将是文件中所有测试的容器，每个it代表一个单独的测试。describe函数接受两个参数，第一个是测试套件的名称，第二个是执行测试的函数。

我们在describe内部使用it函数定义了一个测试。it的第一个参数是对测试的简要描述，第二个参数是包含测试代码的函数。在上面的例子中，我们只有一个测试，但很快我们将看到如何在describe中添加多个it块来进行一系列测试。

info

cy.mount()方法将我们的组件挂载到测试应用中，以便我们可以开始对其进行测试。

现在该看看测试的实际运行了。

运行测试

切换回你打开的测试浏览器，现在应该能在测试列表中看到Stepper组件。点击它来执行测试。

我们的第一个测试验证组件能否在其默认状态下无错误地挂载。如果在测试执行期间出现运行时错误，测试将失败，并且你会看到一个指向问题源的堆栈跟踪。

像上面这样的基本测试是开始测试组件的好方法。Cypress在真实的浏览器中渲染你的组件，你可以使用开发过程中常用的所有技术/工具，例如在测试运行器中与组件交互，使用浏览器开发者工具检查和调试测试及组件代码。

可以随意尝试与步进器组件交互，点击增加和减少按钮。

现在组件已挂载，我们的下一步是测试组件的行为是否正确。

选择器与断言

默认情况下，步进器的计数器初始化为"0"。我们可以通过指定初始计数来覆盖这个值。让我们编写几个测试来验证这两种状态。

为此，我们将使用选择器访问包含计数器的span元素，然后断言元素的文本值是否符合预期。

有多种方法可以使用Cypress从DOM中选择元素。我们将使用cy.get()，它允许我们传入类似CSS的选择器。

获取元素后，我们使用should断言方法来验证它是否具有正确的文本值。

在describe块内第一个测试下方添加以下测试：

React
Angular
Vue
Svelte

it('stepper should default to 0', () => {
  cy.mount(<Stepper />)
  cy.get('span').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(StepperComponent)
  cy.get('span').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(Stepper)
  cy.get('span').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(Stepper)
  cy.get('span').should('have.text', '0')
})

返回测试运行器，你应该能看到测试通过。

在上述测试中，我们通过向cy.get()传入"span"来选择元素，这将选择组件中的所有span标签。目前我们只有一个span，所以这种方法有效。但如果组件演化并添加了另一个span，这个测试可能会开始失败。我们应该使用一个对未来变化不那么敏感的选择器。

在Stepper组件中，span标签有一个data-cy属性：

React
Angular
Vue
Svelte

<span data-cy="counter">{count}</span>

<span data-cy="counter">{{ count }}</span>

<span data-cy="counter">{{ count }}</span>

<span data-cy="counter">{count}</span>

我们为data-cy属性分配了一个唯一的ID用于测试目的。更新测试以使用CSS属性选择器进行cy.get()：

React
Angular
Vue
Svelte

it('stepper should default to 0', () => {
  cy.mount(<Stepper />)
  cy.get('[data-cy=counter]').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(StepperComponent)
  cy.get('[data-cy=counter]').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=counter]').should('have.text', '0')
})

it('stepper should default to 0', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=counter]').should('have.text', '0')
})

测试仍将按预期通过，而且我们的选择器现在具有未来兼容性。有关编写良好选择器的更多信息，请参阅我们的指南选择器最佳实践。

向组件传递Props

我们还应该有一个测试来确保countprop可以将计数器设置为除默认值"0"之外的其他值。我们可以这样向Stepper组件传递props：

React
Angular
Vue
Svelte

it('supports a "count" prop to set the value', () => {
  cy.mount(<Stepper count={100} />)
  cy.get('[data-cy=counter]').should('have.text', '100')
})

it('supports a "count" prop to set the value', () => {
  cy.mount(StepperComponent, {
    componentProperties: {
      count: 100,
    },
  })
  cy.get('[data-cy=counter]').should('have.text', '100')
})

it('supports a "count" prop to set the value', () => {
  cy.mount(Stepper, { props: { count: 100 } })
  cy.get('[data-cy=counter]').should('have.text', '100')
})

it('supports a "count" prop to set the value', () => {
  cy.mount(Stepper, { props: { count: 100 } })
  cy.get('[data-cy=counter]').should('have.text', '100')
})

测试交互

在上述测试中，我们挂载并选择了元素，但没有与之交互。我们还应该测试当用户点击"增加"和"减少"按钮时，计数器的值是否会变化。

为此，我们将使用click()命令与组件交互，该命令会像真实用户一样点击DOM元素。

添加以下测试：

React
Angular
Vue
Svelte

it('when the increment button is pressed, the counter is incremented', () => {
  cy.mount(<Stepper />)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

it('when the decrement button is pressed, the counter is decremented', () => {
  cy.mount(<Stepper />)
  cy.get('[data-cy=decrement]').click()
  cy.get('[data-cy=counter]').should('have.text', '-1')
})

it('when the increment button is pressed, the counter is incremented', () => {
  cy.mount(StepperComponent)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

it('when the decrement button is pressed, the counter is decremented', () => {
  cy.mount(StepperComponent)
  cy.get('[data-cy=decrement]').click()
  cy.get('[data-cy=counter]').should('have.text', '-1')
})

it('when the increment button is pressed, the counter is incremented', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

it('when the decrement button is pressed, the counter is decremented', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=decrement]').click()
  cy.get('[data-cy=counter]').should('have.text', '-1')
})

it('when the increment button is pressed, the counter is incremented', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

it('when the decrement button is pressed, the counter is decremented', () => {
  cy.mount(Stepper)
  cy.get('[data-cy=decrement]').click()
  cy.get('[data-cy=counter]').should('have.text', '-1')
})

查看每个测试的结果时，你会看到在增加测试中计数器现在是"1"，在减少测试中是"-1"。不仅我们的测试通过了，而且我们可以在浏览器中直观地看到结果！

测试带有事件的组件

Stepper组件的所有状态(即计数)都在组件内部处理，然后通知消费者状态的变化。

作为Stepper组件的开发者，你需要确保当最终用户点击增加和减少按钮时，会触发适当的事件，并在消费组件中包含正确的值。

使用间谍

我们可以使用Cypress Spies来验证这些事件是否被正确调用。间谍是一种特殊函数，它会跟踪被调用的次数以及调用时使用的任何参数。我们可以将间谍分配给事件，与组件交互，然后查询间谍以验证它是否按预期被调用。

让我们设置间谍并将它们绑定到组件：

React
Angular
Vue
Svelte

it('clicking + fires a change event with the incremented value', () => {
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(<Stepper onChange={onChangeSpy} />)
  cy.get('[data-cy=increment]').click()
  cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})

it('clicking + fires a change event with the incremented value', () => {
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(StepperComponent, {
    componentProperties: {
      change: {
        emit: onChangeSpy,
      } as any,
    },
  })
  cy.get('[data-cy=increment]').click()
  cy.get('@changeSpy').should('have.been.calledWith', 1)
})

it('clicking + fires a change event with the incremented value', () => {
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(Stepper, { props: { onChange: onChangeSpy } })
  cy.get('[data-cy=increment]').click()
  cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})

it('clicking + fires a change event with the incremented value', () => {
  const onChangeSpy = cy.spy().as('onChangeSpy')
  cy.mount(Stepper, { props: { onChange: onChangeSpy } })
  cy.get('[data-cy=increment]').click()
  cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})

首先，我们通过调用cy.spy()方法创建一个新的间谍。我们传入一个字符串为间谍设置别名，这为间谍分配了一个我们稍后可以引用的名称。在cy.mount()中，我们初始化组件并将间谍传入其中。之后，我们点击增加按钮。

下一行有点不同。我们已经看到如何使用cy.get()方法选择元素，但我们也可以用它来获取之前设置的任何别名。我们使用cy.get()获取间谍的别名(在别名名称前加上"@")。我们断言该方法是否按预期值被调用。

这样，Stepper组件就得到了充分的测试。干得好！

下一步是什么？

恭喜你掌握了Cypress组件测试的基础知识！

要了解更多关于使用Cypress进行测试的信息，请查看 Cypress简介指南。

Cypress组件测试

你将学习到​

配置组件测试​

支持的框架​

选择测试类型​

项目设置​

安装依赖​

配置文件​

选择浏览器​

编写第一个测试​

框架支持​

第一个组件测试​

测试解析​

运行测试​

选择器与断言​

向组件传递Props​

测试交互​

测试带有事件的组件​

使用间谍​

下一步是什么？​

目录

你将学习到

配置组件测试

支持的框架

选择测试类型

项目设置

安装依赖

配置文件

选择浏览器

编写第一个测试

框架支持

第一个组件测试

测试解析

运行测试

选择器与断言

向组件传递Props

测试交互

测试带有事件的组件

使用间谍

下一步是什么？