Use Nitro as Mock Server

Nitro is a server toolkit that allows you to create web servers with everything you need and deploy them wherever you prefer. It's used in Nuxt 3 to power the server-side part of your Nuxt applications.

In this article, I will show how you can use Nitro as a mock server for your frontend E2E tests.

Setup Nitro

First, you need to create a new Nitro project, you can use the official starter template:

npx giget@latest nitro mock-server --install

Then, you can start the Nitro server in the newly created mock-server directory:

npm run dev

Your Nitro server is now running on http://localhost:3000.

Mock API

To mock API endpoints, you can use the full power of Nitro's server routes. Defining a route is as simple as creating a file inside the api/ or routes/ directory.

Here is an example of how you can create a simple mock API endpoint with a dynamic route parameter:

// /routes/users/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')

  // Do something with id

  return `User profile!`
})

Nitro's server routes are very powerful and flexible, you can use them to create any kind of API endpoint you need.

Integrate in E2E setup

Now that you have a mock server running, you can use it in your frontend E2E tests. Let's do it exemplary with Playwright.

Let me first introduce the basic setup of the Nuxt 3 demo application that I use for this article:

The application uses one server API endpoint that fetches users from an API endpoint that is configured in the .env file:

NUXT_EXTERNAL_API_URL=https://jsonplaceholder.typicode.com

In this example, we would like to mock this API endpoint to avoid making real API requests during our E2E tests. Therefore, we want to replace it with our Nitro mock server:

NUXT_EXTERNAL_API_URL=http://localhost:5005

To use the Nitro server in your Playwright tests, you can start the Nitro server in the background before running the tests using the start-server-and-test npm package:

{
  "scripts": {
    "start-mock-server": "npm run --prefix mock-server start",
    "dev:e2e": "dotenv -e ./.env.e2e -- playwright test --ui",
    "test:e2e:ui": "start-server-and-test start-mock-server 5005 dev:e2e"
  },
}

The Playwright configuration file starts the web server of your frontend application before running the tests:

import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  // ....

  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'pnpm run dev',
    reuseExistingServer: !process.env.CI,
    url: 'http://localhost:3000',
  },
})

That's it! Now you can run your E2E tests with the Nitro mock server running in the background:

As you can see the Playwright tests are passing and the Nitro server is used as a mock server for the external API requests. You can verify this because the original API endpoint returns 10 results and our mock server returns 2 results.

Conclusion

In this article, I showed you how you can use Nitro as a mock server for your frontend E2E tests. This can be very useful to avoid making real API requests during your tests and to speed up your development process. If you are already using Nuxt 3 as your frontend framework, you can easily integrate Nitro as a mock server in your setup and benefit from its powerful server routes.

If you liked this article, follow me on X to get notified about my new blog posts and more content.

Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter: