Vue.js Vue测试UTIL在多个测试中装载
我正在使用Vue测试Utils和Jest测试我的Vue应用程序。下面是我的仪表板组件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
<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();
});