search

nuxt / test-utils

🧪 Test utilities for Nuxt
http://nuxt.com/docs/getting-started/testing
MIT License
287 stars 75 forks source link

Why do errors occur when using '@nuxt/test-utils/e2e' for API testing? #874

Open manpreet-compro opened 6 days ago

manpreet-compro commented 6 days ago

Summary (generated):

Here is a brief summary in English:

A developer is trying to set up end-to-end testing for server-side functionality in a Nuxt app using Nitro, but is encountering errors related to frontend routes despite setting server to true and browser to false. The error is apparently due to the absence of an index.vue file in the /pages directory, which is expected to contain application logic. The developer expects the setup to only run the server part and not be concerned with frontend parts.

Discussed in https://github.com/nuxt/nuxt/discussions/27820

Originally posted by **manpreet-compro** June 25, 2024 I am working on a Nuxt app and trying to set up end-to-end testing for server-side functionality related to API endpoints I have developed using Nitro. However, I encounter errors related to frontend routes despite my expectation to run only the server part without involving the frontend. Test server setup code ``` await setup({ rootDir: fileURLToPath(new URL('../..', import.meta.url)), server: true, browser: false, dev: true, setupTimeout: 600 * 1000 }); ``` I am setting `server` to true and `browser` to false. I am seeing the following error 25 06 2024_20 41 31_REC I found out this error is related to frontend routes, particularly of absence of `index.vue` in my project under `/pages` which is expected application logic. **I expected this setup to run only the server part and not be concerned with the frontend part.** Am I missing something? Any help will be appreciated Following is vitest config file for reference ``` import { defineVitestConfig } from '@nuxt/test-utils/config'; export default defineVitestConfig({ test: { reporters: 'verbose', passWithNoTests: true } }); ```
dosubot[bot] commented 6 days ago

Hey there, @manpreet-compro! I'm here to help you with any bugs, questions, or contributions you might have. Let's tackle this together!

The errors occur because the absence of an index.vue file in your /pages directory causes the Vue Router to throw 404 errors. Even with server set to true and browser set to false, Nuxt still expects a basic frontend structure.

To resolve this, create a minimal index.vue file in your /pages directory:

<template>
  <div>Welcome to Nuxt</div>
</template>

This will satisfy the router's requirement and prevent the 404 errors related to the frontend routes.

Additionally, ensure your vitest.config.ts includes the necessary setup for server-side testing. Here is an example configuration:

import { defineVitestConfig } from '@nuxt/test-utils/config';

export default defineVitestConfig({
  test: {
    dir: './test/nuxt',
    coverage: {
      include: ['packages/nuxt/src/app'],
    },
    environment: 'nuxt',
    setupFiles: [
      './test/setup-runtime.ts',
    ],
    environmentOptions: {
      nuxt: {
        overrides: {
          runtimeConfig: {
            app: {
              buildId: 'override',
            },
          },
          experimental: {
            appManifest: process.env.TEST_MANIFEST !== 'manifest-off',
          },
        },
      },
    },
  },
});

For a more specific example of setting up server-side tests, refer to the following code snippet:

import { fileURLToPath } from 'node:url'
import { $fetch, setup } from '@nuxt/test-utils/e2e'
import { describe, expect, it } from 'vitest'

await setup({
  rootDir: fileURLToPath(new URL('../', import.meta.url)),
})

describe('app', async () => {
  it('runs a test', async () => {
    const html = await $fetch('/')
    expect(html.slice(0, 15)).toMatchInlineSnapshot(`
      "<!DOCTYPE html>"
    `)
  })
})

This should help you set up and run basic server-side tests using @nuxt/test-utils/e2e [1][2][3].

To continue talking to Dosu, mention @dosu.

manpreet-compro commented 6 days ago

@manniL Thanks for moving this to test-utils.

I've confirmed this works by adding index.vue. However, this approach seems problematic. Suppose someone wants to use only the Nitro API parts without any frontend; in that case, test-utils won't work.

If there is a requirement to hit a URL to confirm the server is up before continuing testing, it could be handled by accepting a configuration parameter to provide a specific URL to check instead of always checking the root URL.

@dosu - Tagging in case you can provide more context. If agree to my comment, may be have this in backlog

dosubot[bot] commented 6 days ago

You can indeed configure @nuxt/test-utils/e2e to work without requiring a frontend setup by specifying a custom URL for server readiness checks. This can be done using the setup method's browser option. Here is an example:

import { describe, test } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils/e2e'

describe('My test', async () => {
  await setup({
    browser: {
      url: 'http://custom-url-for-server-readiness-checks'
    },
    // other test context options
  })

  test('my test', () => {
    // ...
  })
})

This configuration will direct @nuxt/test-utils/e2e to use the specified custom URL for server readiness checks, allowing you to bypass the need for a frontend setup [1].

To continue talking to Dosu, mention @dosu.

manpreet-compro commented 6 days ago

The response doesn't seem correct.

browser option in setup function is of type boolean

image