Question

我有一个Page级组件，该组件实现了具有插槽的组件 BookingInformation 。在Page组件中，还有一个带有插槽的 BookingInformationHeader 组件。 header 和 default 。

我的问题是，我应该如何设置测试，以便在@Reservation.State wasBookingJustMade更改为true时可以测试GoogleConversionTrackingImage是否可见？

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Reservation } from "@/store/vuex-decorators";
import { BookingInformation, BookingInformationHeader } from "@/components";
import GoogleConversionTrackingImage from './components/GoogleConversionTrackingImage.vue';

@Component({
  components: {
    BookingInformation,
    BookingInformationHeader,
    GoogleConversionTrackingImage
  }
})
export default class ConfirmationPage extends Vue {
  renderTrackingImage: boolean = false;

  @Reservation.State wasBookingJustMade: boolean;
}
</script>

<template>
  <booking-information page-type="confirmation-page" class="confirmation-page">
    <template slot="header" slot-scope="bookingInfo">
      <booking-information-header>
        <template slot="buttons">
          // some buttons
        </template>
      </booking-information-header>
      <google-conversion-tracking-image v-if="wasBookingJustMade" />
    </template>
  </booking-information>
</template>

Answer 1

通过在测试文件中使用vue测试工具https://vue-test-utils.vuejs.org/和chai https://www.chaijs.com/，您可以执行以下操作：

    import mount from "@vue/test-utils";
    import expect from "chai";

    const wrapper = mount(BookingInformation,<inner components you want to test>);
    expect(googleImage.exists()).to.be.true;
    wrapper.setData({
        wasBookingJustMade: true,
    });
    const googleImage = wrapper.find("google-conversion-tracking-image");
    expect(googleImage.exists()).to.be.false;

您可能还需要导入页面级组件。您可以为要查找的组件指定一个ID，然后按ID进行搜索。

如何测试这个组件？

1 个答案: