我如何可以开玩笑地替换假响应,然后在真实状态vuex中替换数据?

问题描述 投票:0回答:1

在我的目录中

store
 |
 |-- modules
    -- user.js
 |-- index.js  

store/index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

// modules
import user from "./modules/user";
export const store = new Vuex.Store({
    state: {
        loading: false
    },
    strict: false,
    modules: {
        user
    },
    actions: {},
    mutations: {}
});

store / modules / user.js

import { eraseCookie, createCookie, readCookie } from "../../plugins/cookie.js";
export default {
    namespaced: true,
    state: () => ({
        isRefresh: false,
        userData: null,
        allCookies: {
            access_token: null,
            refresh_token: null,
            token_expires_in: null,
            dateLoginUser: null
        }
    }),
    actions: {
        checkStateUser({ state, commit, dispatch }) {
            if (!readCookie("access_token")) {
                dispatch("clearUser");
                return;
            }
            if (!localStorage.getItem("dateLoginUser")) {
                localStorage.setItem("dateLoginUser", new Date());
            }
            commit("SET_DATA", {
                id: "allCookies",
                data: {
                    access_token: readCookie("access_token"),
                    refresh_token: readCookie("refresh_token"),
                    token_expires_in: readCookie("token_expires_in"),
                    dateLoginUser: localStorage.getItem("dateLoginUser")
                }
            });
            axios.defaults.headers.common["Authorization"] =
                "Bearer " + state.allCookies.access_token;
            dispatch("getUser");
        },
        async getUser({ dispatch, commit }) {
            try {
                let { data } = await axios.get(`/user`);
                commit("SET_DATA", { data: data.data, id: "userData" }); 
            } catch (error) {
                commit("SET_DATA", { data: null, id: "userData" });
                dispatch("clearUser");
            }
        },
        checkRefresh({ state, dispatch, commit }) {
          // not important
        },
        async refreshToken({ state, dispatch }) {
          // not important
        },
        setNewAccess({ commit }, { data }) {
         // not important
        },
        clearUser({ commit }) {
            // remove all cookie and state
            window.location.replace("/");
        }
    },
    mutations: {
        SET_DATA(state, { id, data }) {
            state[id] = data;
        }
    }
};

并且在用户AUTH测试中

user.spec.js

import { eraseCookie, createCookie, readCookie } from "~/plugins/cookie.js";
import { store } from "~/store/index.js";
import axios from "axios";
jest.mock("axios");
let userData = {
    mobile: "09378888888",
    email: "[email protected]",
    account_type: "legal",
    full_name: "xxx xxxx",
    first_name: "xxx",
    last_name: "xxx",
    company_name: "xxxxxx",
    avatar: "2019/09/15/xxxx.png"
};
describe("AUTH", () => {
    let dispatch;
    let state;
    beforeEach(() => {
        global.window = Object.create(window);
        global.window.axios = axios;
        dispatch = jest.fn();
        state = jest.fn();
    }); 
    it.only("call state user by token", async () => {
        let fakeToken = "face_access_token";
        createCookie("access_token", fakeToken);
        await store.dispatch("user/checkStateUser");
        let getUser = jest.fn();
        getUser(dispatch("user/getUser"));
        expect(getUser).toHaveBeenCalledTimes(1);
        let res = {
            status: 200,
            data: {
                ...userData
            }
        };
        await axios.get.mockResolvedValue(() => {
            Promise.resolve({ ...res }); 
        });

        Object.defineProperty(store.state.user, "prop", {
            get: jest.fn(() => "userData"),
            set: jest.fn()
        });
        expect(store.state.user.userData).toBe(userData.data);
    });
});

这里我要在操作getUser调用时替换userData伪造的并在state.user.userData中提交SET_DATA userData怎么办?

mocking jestjs axios vuex vue-test-utils
1个回答
1
投票

解决方案:我应该在开始测试后像这样移动moockResolvedValue;

it("call state user status: 200", async () => {
        let res = {
            status: 200,
            data: {
                data: { ...userData }
            }
        };
        axios.get.mockResolvedValue(res);

        let fakeToken = "face_access_token";
        createCookie("access_token", fakeToken);
        await store.dispatch("user/checkStateUser");
        let getUser = jest.fn();
        getUser(dispatch("user/getUser"));
        expect(getUser).toHaveBeenCalledTimes(1);
        await flushPromises();
        expect(store.state.user.userData).toStrictEqual(userData);
    });

我希望使用全部。

© www.soinside.com 2019 - 2024. All rights reserved.