Vue Test Utils монтируется в нескольких тестах - PullRequest
Новая
       30

Vue Test Utils монтируется в нескольких тестах

1 голос
/ 24 апреля 2020

Я тестирую свое Vue приложение, используя Vue Test Utils и Jest. Ниже приведен мой компонент панели инструментов. 

<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>

Тогда это мой тестовый файл 

import Main from "../Main.vue";
import mergeWith from "lodash.mergewith";
import { customizer, createWrapper } from "@/shared/test-helper";
import Vuex from "vuex";
import EventBus from "@/shared/event-bus";

let GET_EXEC_DATA = jest.fn(() => Promise.resolve());
let GET_EXEC_FILTER_DATA = jest.fn(() => Promise.resolve());

export const createStore = (overrides) => {
  let storeOptions = {
    modules: {
      dashboardV2: {
        namespaced: true,
        state: {
          projects: [],
          currentTab: "",
          selectedFilters: {},
          timeFilter: "",
        },
        actions: {
          GET_EXEC_DATA,
          GET_EXEC_FILTER_DATA,
        },
      },
    },
  };
  return new Vuex.Store(mergeWith(storeOptions, overrides, customizer));
};

describe("Loads Main Dashboard", () => {
  it("should fetch chart data and filter data", () => {
    createWrapper({}, Main, createStore());
    expect.assertions(2);
    expect(GET_EXEC_DATA).toBeCalled();
    expect(GET_EXEC_FILTER_DATA).toBeCalled();
  });

  it("should call fetch chart data when filter changed", () => {
    createWrapper({}, Main, createStore());
    EventBus.$emit("filterChange");
    expect.assertions(1);
    expect(GET_EXEC_DATA).toBeCalledTimes(2);
  });
});

Мой первый тест успешно выполняется, но мой второй тест не пройден, потому что вместо этого вызывается GET_EXEC_DATA 4 раза 2 раза. Это потому, что он вызывается один раз в первом тесте. Тогда, как мне этого избежать?

1 Ответ

0 голосов
/ 26 апреля 2020

На самом деле, я смог решить эту проблему, очистив фиктивные функции 

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