Nuxt•2w ago

tests are queued but never run

I am trying to add unit tests but vitest would never actually run the tests. Here are the list of relevant files:

16 Replies

Hi @nandi95. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'd be happy to help with your Vitest testing issue in Nuxt. Based on the knowledge sources, there could be several reasons why your tests are queued but never run. Without seeing your specific test files and configuration, I can offer some common solutions based on the information provided: 1. Check your Vitest configuration: Make sure you have the correct configuration for Nuxt. If you're using a vitest.config.js file, you might need to rename it or add type: module to your package.json as mentioned in this PR. 2. Verify test file naming and location: Ensure your test files follow the correct naming convention and are in a location that Vitest can find them. 3. Check for conflicts with Playwright: If you're also using Playwright, there might be conflicts between test runners. As mentioned in this issue, you need to tell Vitest and Playwright which files they are responsible for by putting them in different directories and configuring them accordingly. 4. Verify your test syntax: Make sure you're using the correct imports and test structure. For example:

import { describe, it, expect } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import YourComponent from '~/components/YourComponent.vue'

describe('YourComponent', () => {
  it('renders properly', async () => {
    const wrapper = await mountSuspended(YourComponent)
    expect(wrapper.exists()).toBe(true)
  })
})

import { describe, it, expect } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import YourComponent from '~/components/YourComponent.vue'

describe('YourComponent', () => {
  it('renders properly', async () => {
    const wrapper = await mountSuspended(YourComponent)
    expect(wrapper.exists()).toBe(true)
  })
})

5. Check for mocking issues: If you're mocking Nuxt composables or other functions, make sure you're doing it correctly. For example, you can use mockNuxtImport() from 'nuxt-vitest/utils' as mentioned in this Stack Overflow post. If you could provide more details about your specific setup, test files, and any error messages you're seeing, I could offer more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

nandi95OP•2w ago

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config';
import { configDefaults, defaultInclude } from 'vitest/config';
import { isCI } from 'std-env';

export default defineVitestConfig({
    test: {
        reporters: isCI ? ['dot', 'github-actions'] : ['default'],
        expect: {
            requireAssertions: true
        },
        exclude: [...configDefaults.exclude, 'tests/e2e/**'],
        environment: 'nuxt',
        workspace: [
            {
                extends: true,
                test: {
                    name: 'unit',
                    include: ['tests/unit/' + defaultInclude[0]]
                }
            }
        ]
    }
});

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config';
import { configDefaults, defaultInclude } from 'vitest/config';
import { isCI } from 'std-env';

export default defineVitestConfig({
    test: {
        reporters: isCI ? ['dot', 'github-actions'] : ['default'],
        expect: {
            requireAssertions: true
        },
        exclude: [...configDefaults.exclude, 'tests/e2e/**'],
        environment: 'nuxt',
        workspace: [
            {
                extends: true,
                test: {
                    name: 'unit',
                    include: ['tests/unit/' + defaultInclude[0]]
                }
            }
        ]
    }
});

// drawer.test.ts
import { describe, test, expect } from 'vitest';
import { mountSuspended } from '@nuxt/test-utils/runtime';
import { DashboardDrawer } from '#components';

describe('Drawer Component', () => {
    test('should not render when open is false', async () => {
        expect(1).toBe(1);
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title'
            }
        });

        expect(component.html()).not.toContain('test-content');
    });

    test('should render when open is true', async () => {
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title',
                open: true
            }
        });

        expect(component.html()).toContain('test-content');
        expect(component.html()).toContain('Test Title');
    });

    test('should emit close event when close button is clicked', async () => {
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title',
                open: true
            }
        });

        await component.get('button').trigger('click');

        expect(component.emitted()).toHaveProperty('close');
    });
});

// drawer.test.ts
import { describe, test, expect } from 'vitest';
import { mountSuspended } from '@nuxt/test-utils/runtime';
import { DashboardDrawer } from '#components';

describe('Drawer Component', () => {
    test('should not render when open is false', async () => {
        expect(1).toBe(1);
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title'
            }
        });

        expect(component.html()).not.toContain('test-content');
    });

    test('should render when open is true', async () => {
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title',
                open: true
            }
        });

        expect(component.html()).toContain('test-content');
        expect(component.html()).toContain('Test Title');
    });

    test('should emit close event when close button is clicked', async () => {
        const component = await mountSuspended(DashboardDrawer, {
            slots: {
                default: '<div class="test-content">Test Content</div>'
            },
            props: {
                title: 'Test Title',
                open: true
            }
        });

        await component.get('button').trigger('click');

        expect(component.emitted()).toHaveProperty('close');
    });
});

nandi95OP•2w ago

alternatively if I try to run nuxi test I get:

nandi95OP•2w ago

that's with the nuxt config:

testUtils: {
    startOnBoot: true,
    logToConsole: true,
    vitestConfig
}

testUtils: {
    startOnBoot: true,
    logToConsole: true,
    vitestConfig
}

vitestConfig being an inport from the above file @kapa.ai re-evaluate with these comments in mind

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll re-evaluate the issue of Vitest tests being queued but never running based on the knowledge sources provided. Looking more carefully at the documents, I can see several important insights about testing in Nuxt with Vitest: 1. Mocking issues: One common problem is incorrect mocking of Nuxt's auto-imports. As shown in this Stack Overflow post, you need to mock from the correct package source. For example, instead of mocking from '@vueuse/head', you should use '@unhead/vue' or better yet, use mockNuxtImport() from 'nuxt-vitest/utils'. 2. Test environment configuration: Make sure you're using the correct test environment. According to this Stack Overflow post, you might need to explicitly declare the test environment as Nuxt in your Vitest config file. 3. Test runner conflicts: As mentioned in this GitHub issue, if you're using both Vitest and Playwright, you need to ensure they're not trying to run the same test files. Put them in different directories and configure each runner to look only in its specific directory. 4. Proper test setup: When testing components, make sure you're using the correct mounting utilities. For Nuxt components, use mountSuspended from '@nuxt/test-utils/runtime' as shown in this example. 5. Vitest version compatibility: Recent PRs (#28990 and #28987) show updates to Vitest dependencies, which might indicate compatibility issues with older versions. If your tests are still not running after addressing these points, you might want to check the Nuxt community resources for help as suggested in the Getting Help documentation. Providing a minimal reproduction of your issue would help others diagnose the problem more effectively. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

nandi95OP•2w ago

it's something to do with the nuxt vitest environment, if I remove that, it works just fine but obviously errors on a nuxt related issue (accessing vueApp)

nandi95OP•2w ago

I see Dan isn't using this vitest nuxt environment: https://github.com/danielroe/roe.dev/blob/main/test/unit/behaviour.spec.ts

GitHub

roe.dev/test/unit/behaviour.spec.ts at main · danielroe/roe.dev

This is the code and content for my personal website, built in Nuxt. - danielroe/roe.dev

Omnislash•2w ago

No idea, but just in case you didn't know you can challenge kapa more with your new inputs

Omnislash•2w ago

@kapa.ai it's something to do with the nuxt vitest environment, if I remove that, it works just fine but obviously errors on a nuxt related issue (accessing vueApp) It seems Dan isn't using this vitest nuxt environment: https://github.com/danielroe/roe.dev/blob/main/test/unit/behaviour.spec.ts

GitHub

roe.dev/test/unit/behaviour.spec.ts at main · danielroe/roe.dev

This is the code and content for my personal website, built in Nuxt. - danielroe/roe.dev

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're right about the Nuxt Vitest environment issue. Looking at the knowledge sources, I can see some insights that might help with your specific problem. The example you mentioned from Daniel Roe's repository doesn't use the Vitest Nuxt environment directly, which could explain why your tests work when you remove it but then encounter errors with Nuxt-specific features like accessing vueApp. From the knowledge sources, I can see a few relevant points: 1. There are specific environment packages for Nuxt testing with Vitest. Recent PRs (PR #28571 and PR #28570) show updates to vitest-environment-nuxt from version 1.0.0 to 1.0.1, which suggests this is the recommended environment for Nuxt testing. 2. For accessing Nuxt's Vite config in tests, there's a specific approach documented in the Nuxt Kit examples. This might be relevant if your tests need access to the Vite configuration. 3. In issue #31384, there's a workaround for testing issues involving changing the pages directory for tests only:

// nuxt.config.js
export default defineNuxtConfig({
  // ...other config
  dir:
    process.env.NODE_ENV === "test"
      ? {
          pages: "_pages",
        }
      : undefined,
})

// nuxt.config.js
export default defineNuxtConfig({
  // ...other config
  dir:
    process.env.NODE_ENV === "test"
      ? {
          pages: "_pages",
        }
      : undefined,
})

This approach might help if your issue is related to how Nuxt handles pages during testing. If you're still having issues, you might want to try: 1. Explicitly configuring the Vitest environment in your config file 2. Checking your Vitest and Nuxt versions for compatibility 3. Creating a minimal reproduction of your issue to share with the Nuxt community Without seeing your specific configuration and test files, it's difficult to pinpoint the exact issue, but these approaches should help you troubleshoot the problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

nandi95OP•2w ago

Ah okay I just found the issue when using nuxt vitest environment it runs your component in the context of your nuxt app (aka all the bells and whistles). This means in my case the auth middleware when runs makes a request which never completes because nuxt environment? Anyhow vitest happy to sit as long as you keep the process running without a warning 🙃 when changing to jsdom that give me an error that you can only navigate by hashes @danielroe is this worthy of raising as an issue?

danielroe•2w ago

you can use import meta test in your middleware to skip running it in test environments

nandi95OP•2w ago

sure I mean more like the forever going promise the middleware for reference:

export default defineNuxtRouteMiddleware(async () => {
    const { ready, loggedIn, fetch } = useUserSession();

    // If the session is not ready yet, fetch it first
    if (!ready.value) {
        // this won't resolve in tests
        await fetch();
    }

    // After fetching (or if already ready), check if user is logged in
    if (!loggedIn.value) {
    // Redirect to login page if not logged in,
    // You can specify a redirect query parameter to return after login
        return navigateTo({
            path: '/auth/auth0'
            // to implement redirect, we need to have a way to save state while auth0 login flow is ongoing
            // query: { redirect: to.fullPath }
        }, { external: true });
    }
});

export default defineNuxtRouteMiddleware(async () => {
    const { ready, loggedIn, fetch } = useUserSession();

    // If the session is not ready yet, fetch it first
    if (!ready.value) {
        // this won't resolve in tests
        await fetch();
    }

    // After fetching (or if already ready), check if user is logged in
    if (!loggedIn.value) {
    // Redirect to login page if not logged in,
    // You can specify a redirect query parameter to return after login
        return navigateTo({
            path: '/auth/auth0'
            // to implement redirect, we need to have a way to save state while auth0 login flow is ongoing
            // query: { redirect: to.fullPath }
        }, { external: true });
    }
});

Gaming

Programming

tests are queued but never run

Did you find this page helpful?