Nuxt•5w ago

mockNuxtImport() is a macro and it did not get transpiled

Writing an example test

import { describe, expect, it, vi } from 'vitest'
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

// Define the mock API
const mockApi = vi.hoisted(() => ({
  worklog: {
    list: vi.fn(),
  },
}))

// Mock useNuxtApp
mockNuxtImport('useNuxtApp', () => {
  return () => ({
    $api: mockApi,
  })
})

// Example test
describe('MyComponent', () => {
  it('should call worklog.list', async () => {
    mockApi.worklog.list.mockResolvedValue([{ id: 1, title: 'Test' }])
    const result = await mockApi.worklog.list()
    expect(result).toEqual([{ id: 1, title: 'Test' }])
    expect(mockApi.worklog.list).toHaveBeenCalled()
  })
})

import { describe, expect, it, vi } from 'vitest'
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

// Define the mock API
const mockApi = vi.hoisted(() => ({
  worklog: {
    list: vi.fn(),
  },
}))

// Mock useNuxtApp
mockNuxtImport('useNuxtApp', () => {
  return () => ({
    $api: mockApi,
  })
})

// Example test
describe('MyComponent', () => {
  it('should call worklog.list', async () => {
    mockApi.worklog.list.mockResolvedValue([{ id: 1, title: 'Test' }])
    const result = await mockApi.worklog.list()
    expect(result).toEqual([{ id: 1, title: 'Test' }])
    expect(mockApi.worklog.list).toHaveBeenCalled()
  })
})

Throws the

mockNuxtImport() is a macro and it did not get transpiled. This may be an internal bug of @nuxt/test-utils

mockNuxtImport() is a macro and it did not get transpiled. This may be an internal bug of @nuxt/test-utils

error

8 Replies

kapa.ai•5w ago

Hi @Turawkin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message "mockNuxtImport() is a macro and it did not get transpiled" indicates that the macro transformation for mockNuxtImport did not occur. This is a known requirement: mockNuxtImport is a macro that must be processed by the Nuxt test environment and its build tooling. If you see this error, it usually means that your test is not running in the correct environment or the macro is not being picked up by the build process. Key points from the documentation: - mockNuxtImport is a macro that gets transformed to vi.mock and is hoisted. It must be used in a context where the Nuxt test environment is active and the macro can be transpiled by the build system. - You must use the Nuxt test environment, either by naming your test file with .nuxt.spec.ts or by adding // @vitest-environment nuxt at the top of your test file. This ensures the macro is recognized and transpiled correctly. - If you use the default Vitest environment or run the test outside of Nuxt's test-utils context, the macro will not be transpiled, resulting in the error you see. How to fix: 1. Ensure your test file is using the Nuxt environment.
- Name your test file with .nuxt.spec.ts (e.g., my-component.nuxt.spec.ts),
- Or add // @vitest-environment nuxt as the first line in your test file. 2. Make sure you are running tests with the Nuxt test-utils setup.
- Your vitest.config.ts should use @nuxt/test-utils/config as described in the docs. Example from the docs:

// @vitest-environment nuxt
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useStorage', () => {
  return () => {
    return { value: 'mocked storage' }
  }
})
// your tests here

// @vitest-environment nuxt
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useStorage', () => {
  return () => {
    return { value: 'mocked storage' }
  }
})
// your tests here

If you follow these steps and still encounter the error, double-check that your test runner is using the correct config and that your file naming or environment comment is correct. If the problem persists, it may be an internal bug or a misconfiguration in your project setup as noted in the error message itself. For more details, see the official documentation: Nuxt Testing: mockNuxtImport and Unit Testing Environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@311505602075426816> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TurawkinOP•5w ago

@kapa.ai setting the test environment to nuxt makes my tests run indefinetly

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If setting the test environment to nuxt causes your tests to run indefinitely, the knowledge sources do not provide a direct explanation or solution for this specific issue. However, here are some relevant points and best practices from the documentation that may help you troubleshoot: - The Nuxt test environment (environment: 'nuxt' in your vitest.config.ts, or using the // @vitest-environment nuxt comment or .nuxt.spec.ts file naming) initializes a global Nuxt app before your tests run. If your app or plugins have side effects, infinite loops, or hang during initialization, this could cause tests to hang as well Unit Testing. - The setup function for end-to-end tests has a setupTimeout option (default 60 seconds). If your Nuxt app takes too long to build or initialize, you may want to increase this timeout or investigate what is causing the delay Setup. - Mutating global state or not properly cleaning up between tests can cause unpredictable behavior, including hanging tests. The docs recommend resetting global state if you modify it during tests Unit Testing. - If you are using both @nuxt/test-utils/runtime and @nuxt/test-utils/e2e in the same file, this is not supported and can cause issues. Split your tests into separate files for unit and end-to-end tests Conflict with End-To-End Testing. If none of these suggestions resolve your issue, the knowledge sources do not contain enough information to provide a definitive answer for why your tests run indefinitely when using the Nuxt test environment. It may be necessary to further debug your app's initialization or check for issues in your Nuxt configuration or plugins. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@311505602075426816> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TurawkinOP•5w ago

@kapa.ai thanks for nothing I guess

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry that my previous answer wasn't helpful. Based on the knowledge sources provided, there is no explicit information about why setting the test environment to nuxt would cause your tests to run indefinitely. The documentation covers setup, configuration, and some troubleshooting tips, but does not address this specific issue or provide a direct solution for indefinitely running tests in the Nuxt test environment. If you need further assistance, you may want to check for issues in your Nuxt app's initialization or consult the official Nuxt documentation on testing for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@311505602075426816> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

mockNuxtImport() is a macro and it did not get transpiled

Did you find this page helpful?