·
3 min read
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:
bash
npx giget@latest nitro mock-server --install
Then, you can start the Nitro server in the newly created mock-server directory:
bash
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.
Info
This repository contains the demo code which I describe below.
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:
yaml.env
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:
yaml.env
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:
jsonpackage.json
{
"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:
playwright.config.ts
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:
Unlocking the Power of v-for Loops in Vue With These Useful Tips
Looping through arrays and objects is a common task in Vue applications. The v-for directive is the perfect tool for this job. It is mighty, and you can use it in many different ways. In this article, I will show you some valuable tips and tricks to get the most out of the v-for directive.
Login at Supabase via REST API in Playwright E2E Test
Learn how to login a user via the Supabase REST API in a Playwright end-to-end test and test authenticated pages.
