我在弄清楚如何對 Vue 組件（使用 Cypress Component Test Runner）進行簡單測驗以查看按鈕單擊是否會導致發出事件時遇到問題
// MyButton.vue component
<template>
<Button
data-testid="button"
label="Click Button"
@click="clickButton()"
/>
</template>
<script setup lang="ts">
import { defineEmits } from "vue";
const emit = defineEmits(["clickButtonEvent"]);
function clickButton() {
emit("clickButtonEvent");
}
</script>
// MyButton.spec.ts
it.only("should emit an even when clicked", () => {
const clickButtonSpy = cy.spy().as("clickButtonEvent");
mount(FulfilButton, {
global: {
components: {
Button,
},
},
})
.get('[data-testid="button"]')
.click();
cy.get("@clickButtonEvent").should("have.been.called");
});
這不起作用 - 在控制臺中我看到
mount
get
-click
但是然后這個：
expect clickButtonEvent to have been called at least once, but it was never called
所以我想我沒有cy.spy正確連接它- 大概是因為我沒有將它作為安裝的一部分來做？我需要做什么？按鈕本身是一個 PrimeVue 按鈕組件，但我很確定這不會阻止我做這個測驗？
uj5u.com熱心網友回復：
好吧，你根本就沒有勾搭間諜。
Cypressmount命令具有與vue-test-utils mount（它vue-test-utils在后臺使用）相同的界面
在vue-test-utilsv1（對于 Vue 2）中，您可以使用listeners mount 選項附加間諜，如本答案所示
但是，由于您使用Vue公司3反過來VUE測驗-utils的v2的地方listeners安裝選項被洗掉，可能是你的最好選擇使用包裝中推薦的API -發射
這個例子取自Jessica Sachs（賽普拉斯團隊成員）（repo）最近的談話，她做了這樣的事情：
mount(FulfilButton, {
global: {
components: {
Button,
},
},
})
.get('[data-testid="button"]')
.click()
.vue()
.then((wrapper) => {
expect(wrapper.emitted('clickButtonEvent')).to.have.length(1)
})
請注意，這vue()不是內置的 Cypress 命令。在這個演示/存盤庫中，它是由 Jessica 在支持檔案中添加的
// ./cypress/support/index.js
Cypress.Commands.add('vue', () => {
return cy.wrap(Cypress.vueWrapper)
})
您可以在不引入任何幫助程式的情況下執行非常相似的操作（示例）
it('emits "increment" event on click', () => {
cy.get('button')
.click()
.click()
.then(() => {
cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'increment')
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372769.html
標籤：Vue.js 单元测试 柏 cypress-component-test-runner