Question

我想为我的Jest测试创建一个Mock API服务器，以便可以定义所有后端端点并创建响应和身份验证检查。

通过遵循Chris Fritz的一些源代码“ Vue-Enterprice-boilerplate”，我设法设置了服务器和路由：
https://github.com/chrisvfritz/vue-enterprise-boilerplate/tree/master/tests/unit

// 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}`
};

服务器在测试开始时运行，我可以控制台记录路由文件。我只是不知道从我的Vuex调用axios将如何使用模拟API而不是真正的API。可能需要在测试中的某处导入axios，以防止使用开发URL？

/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" });
  },

登录操作被调用，但我没有通过axios.post。

我是否需要将axios导入某处以确保获得新实例？（Vuex使用一个我设置的baseURL和标头）

除此以外，所有其他测试和逻辑均有效。

Vue Jest-创建模拟Api服务器

0 个答案: