0

I have the same issue than this post: Why does vitest mock not catch my axios get-requests?

I would like to test my vuex store on vuejs and it works for getters etc but not for actions part with axios get request. I don't know if it's a good practice to test vuex store than the component in Vue ?

But I guess I need to test both, right ? a project https://stackblitz.com/edit/vitest-dev-vitest-nyks4u?file=test%2Ftag.spec.js

my js file to test tag.js

import axios from "axios";
const actions = {
  async fetchTags({ commit }) {
    try {
      const response = await axios.get(
        CONST_CONFIG.VUE_APP_URLAPI + "tag?OrderBy=id&Skip=0&Take=100"
      );

      commit("setTags", response.data);
    } catch (error) {
      console.log(error);
      return;
    }
  },
};
export default {
  state,
  getters,
  actions,
  mutations,
};

then my test (tag.spec.js)

import { expect } from "chai";
import { vi } from "vitest";
import axios from "axios";

vi.mock("axios", () => {
  return {
    default: {
      get: vi.fn(),
    },
  };
});
describe("tag", () => {
test("actions - fetchTags", async () => {
    const users = [
      { id: 1, name: "John" },
      { id: 2, name: "Andrew" },
    ];
    axios.get.mockImplementation(() => Promise.resolve({ data: users }));
    axios.get.mockResolvedValueOnce(users);

    const commit = vi.fn();
    await tag.actions.fetchTags({ commit });

     expect(axios.get).toHaveBeenCalledTimes(1);
    expect(commit).toHaveBeenCalledTimes(1);
  });
}); 

It looks like some other peolpe have the same issues https://github.com/vitest-dev/vitest/issues/1274 but it's still not working.

I try with .ts too but I have exactly the same mistake:

FAIL tests/unit/store/apiObject/tag.spec.js > tag > actions - fetchTags AssertionError: expected "spy" to be called 1 times ❯ tests/unit/store/apiObject/tag.spec.js:64:24 62| await tag.actions.fetchTags({ commit }); 63| 64| expect(axios.get).toHaveBeenCalledTimes(1); | ^ 65| expect(commit).toHaveBeenCalledTimes(1); 66| });

  • Expected "1"
  • Received "0"

Thanks a lot for your help.

I finally found the mistake, it was on my vitest.config.ts file, I have to add my global config varaible for my api: import { config } from "@vue/test-utils"; import { defineConfig } from "vitest/config";

import { resolve } from "path";
var configApi = require("./public/config.js");
const { createVuePlugin } = require("vite-plugin-vue2");

const r = (p: string) => resolve(__dirname, p);

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
  },
  define: {
    CONST_CONFIG:  configApi,
  },
  plugins: [createVuePlugin()],
  resolve: {
    alias: {
      "@": r("."),
      "~": r("."),
    },
    // alias: {
    //   "@": fileURLToPath(new URL("./src", import.meta.url)),
    // },
  },
});
Bigoudi88
  • 11
  • 1
  • 4
  • I finally found the mistake, it was on my vitest.config.ts file, I have to add my global config varaible for my api: – Bigoudi88 Jul 01 '22 at 13:35

0 Answers0