Cypress应用

Svelte 示例

info

你将学到

• 如何挂载一个 Svelte 组件
• 如何向 Svelte 组件传递 props
• 如何测试 Svelte 组件中的事件处理器
• 如何在测试中访问组件实例

挂载组件

使用 cy.mount()

要使用 cy.mount() 挂载组件，导入组件并将其传递给该方法：

import { Stepper } from './stepper.svelte'

it('mounts', () => {
  cy.mount(Stepper)
})

向组件传递数据

你可以通过在选项中设置 props 来向组件传递数据：cy.mount()：

it('mounts', () => {
  cy.mount(Stepper, { props: { count: 100 } })
})

测试事件处理器

要测试 Svelte 组件发出的事件，我们需要为步进器递增时传入一个回调函数。Stepper 组件需要为我们调用这个回调函数。我们还可以传入一个 Cypress spy，以便稍后查询 spy 的结果。在下面的示例中，我们传入了 onChange 回调处理器，并验证它是否按预期被调用：

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)
})

访问组件实例

有时你可能希望在测试中直接访问组件实例。为此，使用 .then()，它允许我们处理从 cy.mount() 命令返回的主题。

cy.mount(Stepper).then(({ component }) => {
  //component 是 Stepper 的渲染实例
})