Unit testing Vue Jest-创建模拟Api服务器
我想为Jest测试创建一个模拟API服务器,以便定义所有后端端点并创建响应和身份验证检查 我已经按照Chris Fritz“Vue Enterprise样板文件”中的一些源代码设置了服务器和路由:Unit testing Vue Jest-创建模拟Api服务器,unit-testing,vue.js,mocking,jestjs,axios,Unit Testing,Vue.js,Mocking,Jestjs,Axios,我想为Jest测试创建一个模拟API服务器,以便定义所有后端端点并创建响应和身份验证检查 我已经按照Chris Fritz“Vue Enterprise样板文件”中的一些源代码设置了服务器和路由: 登录操作被调用,但我没有通过axios.post 我是否需要在某个地方导入axios以确保获得新实例?(Vuex使用我设置的baseURL和标头) 除此之外,所有其他测试和逻辑都能正常工作。我建议改为。我希望我的方法能正常工作,但axios mock adapter似乎解决了我的问题,因此我将改为使
登录操作被调用,但我没有通过axios.post 我是否需要在某个地方导入axios以确保获得新实例?(Vuex使用我设置的baseURL和标头)
除此之外,所有其他测试和逻辑都能正常工作。我建议改为。我希望我的方法能正常工作,但axios mock adapter似乎解决了我的问题,因此我将改为使用它。谢谢
// jest.config.js
const _ = require("lodash");
process.env.MOCK_API_PORT = process.env.MOCK_API_PORT || _.random(9000, 9999);
module.exports = {
preset: "@vue/cli-plugin-unit-jest",
setupFiles: ["./tests/unit/setup"],
globalSetup: "<rootDir>/tests/unit/global-setup",
globalTeardown: "<rootDir>/tests/unit/global-teardown",
testMatch: ["**/(*.)spec.js"],
moduleFileExtensions: ["js", "jsx", "json", "vue"],
transform: {
"^.+\\.vue$": "vue-jest",
"^.+\\.js$": "babel-jest",
".+\\.(css|scss|jpe?g|png|gif|webp|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$":
"jest-transform-stub"
},
transformIgnorePatterns: ["/node_modules/(?!vue-spinner)"],
testURL: process.env.API_BASE_URL || `http://localhost:${process.env.MOCK_API_PORT}`
};
/tests/mock-api/routes/auth.js
const Users = require("../resources/users");
module.exports = app => {
console.log('I can see this during tests!');
app.post("/api/v1/login", async (req, res) => {
console.log("I don't see this..");
await Users.authenticate(req.body)
.then(user => {
res.json(user);
})
.catch(error => {
res.status(401).json({ message: error.message });
});
});
});
// /views/Login.spec.js
import Vue from "vue";
import Vuelidate from "vuelidate";
import Login from "@/views/Login";
import BaseButton from "@/components/Globals/_base-button.vue";
import BaseInput from "@/components/Globals/_base-input.vue";
import BaseLabel from "@/components/Globals/_base-label.vue";
import flushPromises from "flush-promises";
import store from "@/store";
import { shallowMount } from "@vue/test-utils";
Vue.use(Vuelidate);
describe("@/views/Login", () => {
// other tests..
it("redirects to posts on successful login", async () => {
const wrapper = shallowMount(Login, { store, stubs: { BaseInput, BaseButton, BaseLabel } });
wrapper.vm.$v.$touch();
const spyDispatch = jest.spyOn(wrapper.vm.$store, "dispatch");
const username = wrapper.find("#username");
const password = wrapper.find("#password");
username.element.value = "johndoe@email.com";
password.element.value = "passwordz";
username.trigger("input");
password.trigger("input");
await wrapper.find("#submitBtn").trigger("click.prevent");
await wrapper.vm.$nextTick();
await flushPromises();
await expect(spyDispatch).toHaveBeenCalledWith("auth/login", {
username: username.element.value,
password: password.element.value
});
// @TODO add expect for redirect as well
});
// /store/auth.js (vuex)
export const actions = {
async login({ commit }, { username, password }) {
console.log("I see this");
const response = await axios.post("/login",
{ username, password }, { withCredentials: true });
console.log("I don't see this");
// @TODO error handling
if (!response) return;
commit("setUser", { ...response.data.user });
router.push({ name: "Posts" });
},