lundi 15 juin 2020

Testing vue component with dispatching action in created hook

i have problem in unit testing in vue js. i'm using vue-test-utils and jest.

error: Image error

this is my test:

import { mount, createLocalVue } from "@vue/test-utils";
import Vuex from "vuex";
import Home from "@/views/Home";

const localVue = createLocalVue();
localVue.use(Vuex);

describe("Home.vue", () => {
  let store;
  let actions;

  beforeEach(() => {
    actions = {
      DISPATCH: jest.fn()
    };

    store = new Vuex.Store({
      actions
    });
  });

  it("should dispatch action when created", () => {
    const wrapper = mount(Home, {
      localVue,
      store
    });
    expect(wrapper.DISPATCH).toHaveBeenCalled();
  });
});

and this is my component:

<script>
import { mapGetters } from "vuex";

import { FETCH_MUSICS } from "@/store/types/action-types";
import { GET_LOADING } from "@/store/types/getter-types";
import { MUSIC } from "@/store/types/types";

import Musics from "@/components/pages/home/Musics";

export default {
  name: "Home",
  components: {
    Musics
  },
  computed: {
    ...mapGetters({
      loading: `${MUSIC}/${GET_LOADING}`
    })
  },
  created() {
    this.$store.dispatch(`${MUSIC}/${FETCH_MUSICS}`);
  }
};
</script>

as you see, i use types and i think because of this i get error. how can i solve that?

thanks for helping me :)

Aucun commentaire:

Enregistrer un commentaire