正在创建的挂钩中测试具有派发动作的vue组件

Question

我在vue js中进行单元测试时遇到问题。我正在使用vue-test-utils和开玩笑。

错误：Image error

这是我的测试：

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();
  });
});

这是我的组件：

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

如您所见，我使用类型，因此我认为我会出错。我该如何解决？

感谢您的帮助：）

Answer 1

您应该制作一个jest.fn()模拟方法，然后仅检查每个方法的toHaveBeenCalled或创建模拟提交方法并使用toHaveBeenNthCalledWith检查。

看这个例子：

import { ApiService } from "@/Components/Service/api.service";
import { randomString, randomNumber } from "@/Components/Tools/StringTools";
import { SET_PAGE, SET_QUERY } from "@/Stores/mutation-types";
import actions from "../../Store/actions";

/**
 * define global variable
 */
let _data = randomString(6);
let _error = randomString(6);
let commit = jest.fn();
let dispatch = jest.fn();
let mockError = false;
let params = {
    module: randomString(6),
    pk: randomNumber(6),
    file_id: randomNumber(6),
};

/**
 * define mock call api
 */

ApiService.query = jest.fn(() => {
    return new Promise(resolve => {
        if (mockError) throw { response: { data: _error } };
        resolve({ data: { data: { _data } } });
    });
});

/**
 * mock route
 */
jest.mock("@/laravelify");

describe("SEARCH_RESOURCES", () => {
    it("Successfully SEARCH_RESOURCES with set data", async () => {
        commit.mockReset();
        await actions[SEARCH_RESOURCES]({ dispatch });
        expect(dispatch).toHaveBeenNthCalledWith(1, SET_PAGE, 1);
        expect(dispatch).toHaveBeenNthCalledWith(2, SET_QUERY);
        expect(dispatch).toHaveBeenNthCalledWith(3, FETCH_RESOURCES);
    });
});