How to mock custom imports while using mountSuspended to test

[jamesjoung]

Environment

"dependencies": {
"nuxt": "3.12.4",
"vue": "latest"
},
"devDependencies": {
"@nuxt/test-utils": "3.14.1",
"@vue/test-utils": "2.4.6",
"happy-dom": "14.12.3",
"jest-image-snapshot": "6.4.0",
"playwright-core": "1.46.0",
"vitest": "2.0.5"
}

Reproduction

Default.vue

<template>
  <NuxtPage />
</template>
<script setup lang="ts"></script>

App.vue

<template>
  <div>Message: {{ getMessage("Hello World") }}</div>
</template>
<script setup lang="ts">
import { getMessage } from "@/service/message-service";

App.test.ts

import { it, expect, vi } from "vitest";
import { mountSuspended } from "@nuxt/test-utils/runtime";
import App from "../../layouts/default.vue";

vi.mock("@/service/message-service", () => {
  return {
    getMessage: () => "hello from mock!!",
  };
});


it("nuxt unit testing", async () => {
  const component = await mountSuspended(App, { route: "/" });
  expect(component.html()).toMatchInlineSnapshot(
    `"<div>Message: hello Hello World</div>"`
  );
});

message-service.ts

export function getMessage(message: string): string {
  console.log("FROM ACTUAL");
  return `hell ${message}`;
}

Describe the bug

I was expecting vitest vi.mock should be able to mock imports to provide custom/mock implementation, however it seems that vi.mock is not working in the context of nuxt test?

If so, how are we suppose to create unit tests and/or E2E using nuxt/test-utils package and be able to provide flexible mocking mechanism?

Additional context

No response

Logs

No response

[dosubot]

Hey @jamesjoung! 👋 I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this together!

To mock custom imports while using mountSuspended to test with Nuxt 3, Vue, and Vitest, you can use the mockNuxtImport function from @nuxt/test-utils/runtime. Here is an example based on your provided context:

import { it, expect, vi } from "vitest";
import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
import App from "../../layouts/default.vue";

// Mock the custom import using mockNuxtImport
mockNuxtImport('@/service/message-service', () => {
  return {
    getMessage: () => "hello from mock!!",
  };
});

it("nuxt unit testing", async () => {
  const component = await mountSuspended(App, { route: "/" });
  expect(component.html()).toMatchInlineSnapshot(
    `"<div>Message: hello from mock!!</div>"`
  );
});

This code demonstrates how to mock the getMessage function from the @/service/message-service module and use mountSuspended to test the App component. The mockNuxtImport function is used to replace the original getMessage function with a mocked version that returns "hello from mock!!". The test then mounts this mocked component and checks that the rendered HTML matches the expected snapshot.

Additionally, ensure you have set up your testing environment correctly by adding @nuxt/test-utils/module to your nuxt.config file and configuring vitest.config.ts as described in the Nuxt documentation. This setup will enable the Nuxt environment for your tests, allowing you to use utilities like mountSuspended effectively.

For more detailed examples and additional use cases, you can refer to the Nuxt test-utils documentation ^{[1][2][3][4][5]}.

To continue talking to Dosu, mention @dosu.