Test mutation + actions

pages/films/index.spec.js

@@ -1,37 +1,36 @@
-import { mount, shallowMount } from "@vue/test-utils";
-import axios from "axios";
-import FilmsView from "./";
-import mockFilms from "@/test/fake-films.json";
+import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Films from "./";
 
-jest.mock("axios", () => ({
-  $get: jest.fn(() => mockFilms)
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe("Films page", () => {
+  let state, actions, store;
+
+  beforeEach(() => {
+    state = {
+      films: []
+    };
+    actions = {
+      getFilms: jest.fn()
+    };
+    store = new Vuex.Store({ state, actions });
+  });
+
   it("should render Films page instance", () => {
-    const wrapper = mount(FilmsView);
+    const wrapper = mount(Films, { store, localVue });
     expect(wrapper.find("img").exists()).toBe(true);
   });
 
   it("should get films from Ghibli API", async () => {
-    let wrapper = shallowMount(FilmsView, {
-      mocks: {
-        $axios: axios
-      }
-    });
-
-    expect((await wrapper.vm.$options.asyncData(wrapper.vm)).films).toEqual(
-      mockFilms
-    );
-
-    // Init page with mocked asyncData
-    wrapper = shallowMount(FilmsView, {
-      mocks: {
-        films: (await wrapper.vm.$options.asyncData(wrapper.vm)).films,
-        $axios: axios
-      }
+    let wrapper = shallowMount(Films, {
+      store,
+      localVue
     });
 
+    await wrapper.vm.$options.asyncData({ store });
+    expect(actions.getFilms).toHaveBeenCalled();
     expect(wrapper.findComponent({ name: "Grid" }).exists()).toBe(true);
   });
 });