N
Nuxt•4mo ago
Marceau

How to call server APIs from unit/e2e test?

I have a composable (among many others which I'm going to want to test) which call useFetch, $fetch, etc... Ideally I want to test exactly what those functions do instead of making isolated $fetch calls, but I can't figure out how to setup the server or how to mock the functions that call its endpoints. So far I have @nuxt/test-utils/e2e setup to make calls to a dev server I run separately with my test database. The problem lies in wanting to make my composables talk to that server, as by default it'll just try to make calls to /api/blabla... without a base URL. Is there a better way to do this without needing to refactor too much code, or am I just missing a small piece here? Thanks a lot
No description
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Marceau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To test composables that use useFetch, $fetch, etc., and have them call your server APIs during unit or end-to-end (e2e) tests, you have a few options depending on your testing goals and setup: 1. End-to-End (e2e) Testing with a Real or Dev Server With @nuxt/test-utils/e2e, you can configure your tests to target a running server (such as your dev server with a test database) by providing the host option to the setup function. This way, all requests (including those from your composables) will be directed to the specified server, and you don't need to refactor your code to add base URLs everywhere. Example: 
import { setup, createPage } from '@nuxt/test-utils/e2e'
import { describe, it, expect } from 'vitest'

describe('login page', async () => {
  await setup({
    host: '<http://localhost:8787',> // Your dev server URL
  })

  it('displays the email and password fields', async () => {
    const page = await createPage('/login')
    // ... your assertions
  })
})
import { setup, createPage } from '@nuxt/test-utils/e2e'
import { describe, it, expect } from 'vitest'

describe('login page', async () => {
  await setup({
    host: '<http://localhost:8787',> // Your dev server URL
  })

  it('displays the email and password fields', async () => {
    const page = await createPage('/login')
    // ... your assertions
  })
})
This approach allows your composables to call /api/xyz as usual, but the requests will be routed to your running server at the specified host, so you don't need to change your composable code to include a base URL. This is the recommended way for e2e tests that should interact with a real backend or test database End-to-End Testing. 2. Unit Testing with Mocked Endpoints For unit tests, you can use registerEndpoint from @nuxt/test-utils/runtime to mock server endpoints. This is useful if you want to test your composables in isolation without hitting a real server. Example: 
import { registerEndpoint } from '@nuxt/test-utils/runtime'
registerEndpoint('/api/blabla', () => ({
  data: 'mocked response'
}))
import { registerEndpoint } from '@nuxt/test-utils/runtime'
registerEndpoint('/api/blabla', () => ({
  data: 'mocked response'
}))
Now, when your composable calls /api/blabla, it will receive the mocked response. This avoids the need for a running server and keeps your tests fast and isolated registerEndpoint. 3. Customizing Base URLs If you need your composables to be flexible about the base URL (for example, to switch between local, test, or production APIs), consider using Nuxt's runtime config and referencing it in your composables. This way, you can override the base URL in your test environment without refactoring all your code. See useRuntimeConfig for details. --- Summary:
- For e2e tests, use the host option in setup to point all API calls to your running dev/test server. - For unit tests, use registerEndpoint to mock API responses. - Use runtime config for flexible base URLs if needed. This should allow you to test your composables as they are, without major refactoring, and have them interact with either real or mocked APIs as appropriate for your test type. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@813712892552544307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?