Nuxt•2w ago

Can't get basic e2e tests working

Is it supposed to be possible to test SPAs using @nuxt/test-utils and vitest? When I run a basic test (createPage, textContent) it doesn't match any text actually shown, what I get back is just a ton of javascript. The test also takes over a hundred seconds before it fails.

5 Replies

kapa.ai•2w ago

Hi @Tobberoth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it's definitely possible to test SPAs using @nuxt/test-utils with Vitest. The issues you're experiencing suggest there might be some configuration problems with your setup. When using createPage() and not seeing the expected content (getting JavaScript instead), it sounds like you might be testing the page before it's fully hydrated. This is a common issue with testing SPAs. Here are some suggestions to fix your issues: 1. Make sure you're waiting for hydration when navigating to a page:

import { setup, createPage } from '@nuxt/test-utils/e2e'
import { describe, it, expect } from 'vitest'

describe('my test', async () => {
  await setup({
    // Your setup options here
  })

  it('displays content correctly', async () => {
    const page = await createPage('/')
    // Wait for the page to be fully hydrated before testing content
    await page.waitForSelector('your-selector')
    expect(await page.textContent('your-selector')).toBe('Expected text')
  })
})

import { setup, createPage } from '@nuxt/test-utils/e2e'
import { describe, it, expect } from 'vitest'

describe('my test', async () => {
  await setup({
    // Your setup options here
  })

  it('displays content correctly', async () => {
    const page = await createPage('/')
    // Wait for the page to be fully hydrated before testing content
    await page.waitForSelector('your-selector')
    expect(await page.textContent('your-selector')).toBe('Expected text')
  })
})

2. Check your setup configuration. The long test time suggests there might be issues with your setup:

await setup({
  rootDir: '.',  // Path to your Nuxt app
  setupTimeout: 120000,  // Increase timeout if needed
  build: true,
  server: true
})

await setup({
  rootDir: '.',  // Path to your Nuxt app
  setupTimeout: 120000,  // Increase timeout if needed
  build: true,
  server: true
})

3. Consider using Playwright's test runner which has better support for waiting for hydration:

import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading')).toHaveText('Your expected text')
})

import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading')).toHaveText('Your expected text')
})

The waitUntil: 'hydration' option is particularly important for SPAs as it ensures the page is fully interactive before running assertions Testing in a Browser. 4. Check for recent updates to @nuxt/test-utils. Recent versions (like 3.14.4) have fixed issues with E2E testing, including setting the proper NODE_ENV when running the built server GitHub PR #29613. If you're still having issues, you might want to check if there's a conflict between your E2E and unit testing setups. Remember that "@nuxt/test-utils/runtime and @nuxt/test-utils/e2e need to run in different testing environments and so can't be used in the same file" Conflict with End-To-End Testing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

TobberothOP•2w ago

@kapa.ai I still get the same output even if I wait for hydration. The setup config is not helping either, the test still takes over a hundred seconds.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still facing issues with your Nuxt e2e tests even after waiting for hydration and adjusting the setup configuration. Let's explore some additional approaches that might help resolve your problem. Based on the knowledge sources, there are a few specific issues that could be causing your problems: 1. Consider using Playwright's test runner directly instead of the Vitest integration:

import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading')).toHaveText('Expected text')
})

import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading')).toHaveText('Expected text')
})

This approach has better built-in support for Nuxt applications Testing in a Browser. 2. Try testing against a running server instead of building for each test:

import { setup, createPage } from '@nuxt/test-utils/e2e'

describe('my test', async () => {
  await setup({
    host: '<http://localhost:3000',> // Point to your already running Nuxt app
  })

  // Your tests here
})

import { setup, createPage } from '@nuxt/test-utils/e2e'

describe('my test', async () => {
  await setup({
    host: '<http://localhost:3000',> // Point to your already running Nuxt app
  })

  // Your tests here
})

This can significantly reduce test execution time as mentioned in the documentation End-To-End Testing. 3. Check for flaky tests related to loading states: There's a known issue with tests that check for loading states being flaky because loading can happen too quickly to be detected. This was mentioned in a GitHub PR about SPA preloader tests GitHub PR #31273. 4. Verify you're using the correct waitFor approach:

// Instead of just waiting for hydration
await page.getByTestId('your-element-id').waitFor({ state: 'visible' })

// Instead of just waiting for hydration
await page.getByTestId('your-element-id').waitFor({ state: 'visible' })

5. Check for version mismatches: There have been issues with mismatching versions of dependencies like ohash causing hydration failures GitHub Issue #31355. Make sure all your Nuxt-related packages are on compatible versions. If you're still experiencing issues, it might be helpful to share more details about your specific test setup and the exact error messages you're seeing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Can't get basic e2e tests working

Did you find this page helpful?