以下组件最终在测试过程中陷入无限的重新渲染循环中,我不知道为什么。它在应用程序中工作得很好,它所做的就是通过事件总线接收一些数据,将其映射到可以在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>,
DefaultComputed,
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
在测试和检查过程中将a放入通知中来修复它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句