Vue.js Vue测试UTIL在多个测试中装载

Vue.js Vue测试UTIL在多个测试中装载,vue.js,vuejs2,vue-test-utils,Vue.js,Vuejs2,Vue Test Utils,我正在使用Vue测试Utils和Jest测试我的Vue应用程序。下面是我的仪表板组件 <template> <div class="dashboard-v2"> <div class="component-container"> <component :loading="loading" :key="identifier" :is="currentTab" /> </div> <SnackB

我正在使用Vue测试Utils和Jest测试我的Vue应用程序。下面是我的仪表板组件

<template>
  <div class="dashboard-v2">
    <div class="component-container">
      <component :loading="loading" :key="identifier" :is="currentTab" />
    </div>
    <SnackBar
      v-on:snackBarHide="displaySnackBar = false"
      :text="snackBarText"
      :show="displaySnackBar"
      :type="snackBarType"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import "@/shared/chart-kick";
import EventBus from "@/shared/event-bus";
import Tabs from "./helpers/Tabs";
import Summary from "./Summary/Index";
import { filters } from "../helpers/filters-details";
import SnackBar from "@/shared/components/SnackBar.vue";

export default {
  components: {
    Tabs,
    Summary,
    SnackBar
  },
  data() {
    return {
      identifier: +new Date(),
      loading: false,
      filtersLoading: false,
      displaySnackBar: false,
      snackBarText: "",
      snackBarType: ""
    };
  },
  mounted() {
    if (!this.projects.length) this.fetchFilterData();
    EventBus.$on("CLEAR_ALL", () => {
      this.identifier = +new Date();
      this.$store.commit(`dashboardV2/UPDATE_FILTER_STATE`, {});
    });
    EventBus.$on("filterChange", () => {
      this.getExecData();
    });
  },
  computed: {
    ...mapState("dashboardV2", [
      "projects",
      "currentTab",
      "selectedFilters",
      "timeFilter"
    ])
  },
  methods: {
    fetchFilterData() {
      this.filtersLoading = true;
      this.$store
        .dispatch("dashboardV2/GET_EXEC_FILTER_DATA")
        .catch(() => {
          this.displaySnackBar = true;
          this.snackBarText = "There was some problem while fetching data";
          this.snackBarType = "failure";
        })
        .finally(() => {
          this.filtersLoading = false;
        });
      this.getExecData();
    },
    getExecData() {
      this.loading = true;
      let params = {
        time_bucket: this.timeFilter,
        time_zone_offset: new Date().getTimezoneOffset()
      };
      filters.map(e => {
        params[e.query] = this.selectedFilters[e.value]
          ? this.selectedFilters[e.value].id
          : null;
      });
      this.$store
        .dispatch("dashboardV2/GET_EXEC_DATA", params)
        .catch(() => {
          this.displaySnackBar = true;
          this.snackBarText = "There was some problem while fetching data";
          this.snackBarType = "failure";
        })
        .finally(() => (this.loading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/dashboard.scss";
</style>

我的第一个测试运行成功,但我的第二个测试失败,因为GET_EXEC_数据被调用了4次而不是2次。是因为它在第一次测试中被调用了一次。那么,如何避免这种情况呢?

实际上,我可以通过清除模拟函数来解决这个问题

afterEach(() => {
  jest.clearAllMocks();
});

尝试定义let GET_EXEC_DATA=jest.fn(()=>Promise.resolve());在每次测试中。
afterEach(() => {
  jest.clearAllMocks();
});