nuxt / nuxt/test-utils

mocking plugins used within nuxt

Open
#544 9 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation enhancement vitest-environment
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.