如何解决测试期间Vue无限循环
以下组件最终在测试过程中陷入无限的重新渲染循环中,我不知道为什么。它在应用程序中工作得很好,它所做的就是通过事件总线接收一些数据,将其映射到可以在component
标签的'is'属性中使用的数据,并将其推入数组。
<template>
<div id="notification-area">
<div v-for="(component,index) in notificationComponents" :key="index">
<component
:is="component.options"
:notification="component.notification"
/>
</div>
</div>
</template>
<script lang="ts">
import {Component,Inject,Vue} from "vue-property-decorator";
import {Notification,UserErrorNotification,InfoNotification} from "@/Notification";
import InfoNotificationView from "@/components/notifications/InfoNotificationView.vue";
import UserErrorNotificationView from "@/components/notifications/UserErrorNotificationView.vue";
import {ComponentOptions,DefaultComputed,DefaultData,DefaultMethods,PropsDefinition} from "vue/types/options";
type VueOptions = ComponentOptions<
Vue,DefaultData<Vue>,DefaultMethods<Vue>,PropsDefinition<Record<string,{}>>
>
interface NotificationComponent {
options: VueOptions;
notification: Notification;
}
@Component({})
export default class NotificationArea extends Vue {
@Inject('eventBus') private eventBus!: Vue;
private notificationComponents = [] as Array<NotificationComponent>;
private static asNotificationComponent(notification: UserErrorNotification | InfoNotification): NotificationComponent{
if (notification instanceof UserErrorNotification) {
return {options: new UserErrorNotificationView().$options,notification: notification}
}
return {options: new InfoNotificationView().$options,notification: notification}
}
created() {
this.eventBus.$on('notification',(notification: UserErrorNotification | InfoNotification) => {
this.notificationComponents.push(NotificationArea.asNotificationComponent(notification));
})
}
}
</script>
InfoNotificationView
和UserErrorNotificationView
是围绕BAlert的简单包装。
以下是导致内存不足异常的测试。
describe("NotificationArea.vue",() => {
let wrapper: Wrapper<NotificationArea>;
beforeEach(() => {
wrapper = shallowMount(NotificationArea,{
provide: {
eventBus: new MockEventBus()
},created() {}
});
});
it("renders the notifications correctly",async () => {
wrapper.setData({
notificationComponents: [successNotificationComponent,warningNotificationComponent]
});
await wrapper.vm.$nextTick() // <-- Here it hangs.
const infoNotification = wrapper.find("infonotificationview-stub");
expect(infoNotification.props('notification')).toBe(successNotificationComponent);
const userErrorNotification = wrapper.find("usererrornotificationview-stub")
expect(userErrorNotification.props("notification")).toBe(warningNotificationComponent);
});
});
解决方法
事实证明,问题出在开玩笑,因为successNotificationComponent
包含一个vue组件。
我通过在测试和检查过程中将testId
放入通知中来解决此问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。