[Vuejs]-Testing vue component with dispatching action in created hook

by

0👍

You should make a jest.fn() mock method and just check toHaveBeenCalled for each method or create mock commit method and check with toHaveBeenNthCalledWith.

Look at this example:

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

Leave a comment