mocking plugins used within nuxt
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 437
- Forks
- 120
- Avg merge
- 22h 52m
- Merged PRs (30d)
- 23
Description
Hey, firstly thank you for making this plugin, it looks very useful :)
Running this module seems to run the whole nuxt environment, including the plugins, and we have a plugin that makes a api call. We normally just mock the module where we import the api function but it doesn't seem to work in this case. For example:
// somePlugin.ts
import { fetchProducts } from "~/service/products";
export default defineNuxtPlugin(async () => {
const products = fetchProducts();
// do something with the products
});
// SomeComponent.nuxt.spec.js
import { describe, it, expect, vi } from "vitest";
import { shallowMount } from "@vue/test-utils";
import SomeComponent from "../SomeComponent.vue";
// trying to mock the products service so that the real api doesn't get called during the plugins
vi.mock("~/service/products");
describe("SomeComponent", async () => {
it("Is a Vue instance", () => {
const wrapper = shallowMount(SomeComponent);
expect(wrapper.vm).toBeTruthy();
});
});
I assume these mocks only work for the component that we are testing and not for the plugins in the nuxt environment for example. Do you have a suggestion about how to solve this?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior using somePlugin.ts and SomeComponent.nuxt.spec.js, starting with the Nuxt test environment setup and the vi.mock("~/service/products") call. Determine whether the plugin's API call can be mocked during plugin loading, and consider the issue resolved when a supported approach or a clearly documented limitation is established.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100