我有一个Snackbar组件,正在为其编写测试。它包含一个子组件(一个按钮,当点击时关闭Snackbar)。
此按钮会发出@click
事件,父组件侦听并运行一个方法以关闭Snackbar或打开另一个Snackbar。
是否有一种方法来模拟$emit
?我似乎找不到任何相关的东西。
import { render, fireEvent, waitFor } from '@testing-library/vue';
import Snackbar from '../Snackbar.vue';
import EventBus from '@/services/EventBus';
describe('Snackbar', () => {
const role = 'alert';
it('should close snackbar on button click', async () => {
const type = 'success';
const { getByRole } = render(Snackbar, {
// with this the button is inaccessible
stubs: ['OBButton'],
});
await EventBus.$emit('addSnack', {
type,
});
const snackbar = getByRole('alert');
// this is wrong...
await fireEvent.click(button);
// this expect should be appropriate.
expect(snackbar).not.toBeInTheDocument;
});
});
这是组件的模板:
<template>
<div class="snackbar-wrapper elevated">
<transition name="snack-slide" v-on:after-leave="checkForMoreSnacks">
<div
role="alert"
class="snack-data"
v-if="currentSnack != null"
>
<span class="snack-text">{{ currentSnack.text }}</span>
<OBButton
:text="currentSnack.buttonText"
@click="closeCurrentSnack"
:type="buttonType"
></OBButton>
</div>
</transition>
</div>
</template>
附加信息:
- 此组件永远不会被卸载。关闭它意味着将
currentSnack
值设置为null
,从而隐藏它。
childWrapper.vm
是undefined
。您可能想将wrapper.find(ButtomComponent)
更改为wrapper.getComponent(ButtomComponent)
。 - Qback