测试中的Vue无限环

Question

在测试期间，以下组件以无限重呈现循环结束，我不知道原因。它在应用程序中运行得很好，它所做的就是通过事件总线接收一些数据，将其映射到可以在component标记中使用的东西，即“属性”，并将其推入数组中。

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

Answer 1

事实证明，这个问题是开玩笑地打印一个非常大的对象，因为successNotificationComponent包含一个vue组件。

我修正了这个问题，在测试和检查时将testId放入通知中。