Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
manpreet-compro opened this issue Jun 27, 2024 · 4 comments
Labels
bug Something isn't working vitest-environment

Comments

@manpreet-compro
Copy link

manpreet-compro commented Jun 27, 2024

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 nuxt/nuxt#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
  }
});
@nuxtbot nuxtbot changed the title Errors while using '@nuxt/test-utils/e2e' for API testing Here's the translated text: Why do errors occur when using '@nuxt/test-utils/e2e' for API testing? Jun 27, 2024
@TheAlexLichter TheAlexLichter changed the title Here's the translated text: Why do errors occur when using '@nuxt/test-utils/e2e' for API testing? Why do errors occur when using '@nuxt/test-utils/e2e' for API testing? Jun 27, 2024
@TheAlexLichter TheAlexLichter transferred this issue from nuxt/nuxt Jun 27, 2024
@dosubot dosubot bot added bug Something isn't working vitest-environment labels Jun 27, 2024
Copy link

dosubot bot commented Jun 27, 2024

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
Copy link
Author

@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

Copy link

dosubot bot commented Jun 27, 2024

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
Copy link
Author

The response doesn't seem correct.

browser option in setup function is of type boolean

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vitest-environment
Projects
None yet
Development

No branches or pull requests

1 participant