E2E testing mocking an external API

[GazEdge]

Im using e2e testing, but rather than use /server/api for my endpoints (called client side only), I use external apis.

How can i mock the responses from external apis?

Ive tried a few 3rd party tools, like miragejs, but im guessing its not being pulled into the nuxt test instance.

Does anyone have a solution to this? I know i could probably use runtime and component testing to apply mocks to the api calls, but I'd prefer to run tests e2e, but with mocked external apis.

Thanks

[dosubot[bot]]

Hey there, @GazEdge! I'm a bot designed to help you out with bugs, questions, and becoming a contributor. Feel free to ask me anything while waiting for a human maintainer to assist you.

To mock the responses from external APIs for end-to-end (E2E) testing in a Nuxt application, you can use the @nuxt/test-utils library, which provides various utilities for testing Nuxt applications. One of the utilities you can use is registerEndpoint, which allows you to mock API responses. Here is an example of how to use it:

1. Install @nuxt/test-utils and its dependencies:

   yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

2. Create a test file and use registerEndpoint to mock API responses:

   import { describe, expect, it } from 'vitest'
   import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
   import FetchComponent from '~/components/FetchComponent.vue'
   
   describe('server mocks and data fetching', () => {
     it('can mock fetch requests', async () => {
       registerEndpoint('https://jsonplaceholder.typicode.com/todos/1', () => ({
         title: 'title from mocked api',
       }))
       const component = await mountSuspended(FetchComponent)
       expect(component.html()).toMatchInlineSnapshot(
         '"<div>title from mocked api</div>"',
       )
     })
   
     it('can mock fetch requests with query parameters', async () => {
       registerEndpoint('/with-query', () => ({
         title: 'mocked',
       }))
       expect(
         await $fetch<unknown>('/with-query', { query: { test: true } }),
       ).toMatchObject({
         title: 'mocked',
       })
     })
   
     it('can mock fetch requests with explicit methods', async () => {
       registerEndpoint('/method', {
         method: 'POST',
         handler: () => ({ method: 'POST' }),
       })
       registerEndpoint('/method', {
         method: 'GET',
         handler: () => ({ method: 'GET' }),
       })
       expect(await $fetch<unknown>('/method', { method: 'POST' })).toMatchObject({
         method: 'POST',
       })
       expect(await $fetch<unknown>('/method')).toMatchObject({ method: 'GET' })
     })
   })

3. Run your tests:

   You can run your tests using your preferred test runner, such as Vitest or Playwright.

By using registerEndpoint, you can easily mock API responses and test how your Nuxt application interacts with these endpoints during E2E testing. This approach allows you to create various mock configurations that your Nuxt application can interact with, ensuring comprehensive testing coverage.

For more detailed information on setting up and using @nuxt/test-utils, refer to the Nuxt Testing Documentation ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[GazEdge]

@dosu your answer wont work, as registerEndpoint can only be used in runtime testing. Find a solution that works with @nuxt/test-utils/e2e

[dosubot[bot]]

To mock external API responses specifically for E2E testing using @nuxt/test-utils/e2e, you can use a third-party tool like MirageJS. Here’s how you can integrate MirageJS with your Nuxt test instance for E2E testing:

1. Install Required Dependencies:
   Ensure you have the necessary dependencies installed, including @nuxt/test-utils and your chosen E2E test runner (e.g., vitest, jest, playwright).

   yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core miragejs

2. Setup MirageJS:
   Configure MirageJS to mock API endpoints. You can do this by creating a MirageJS server in your test setup.

   // test/setupMirage.ts
   import { createServer } from 'miragejs'
   
   export function setupMirage() {
     return createServer({
       routes() {
         this.namespace = 'api'
   
         this.get('/users', () => {
           return {
             users: [{ id: 1, name: 'John Doe' }]
           }
         })
       }
     })
   }

3. Integrate MirageJS with Nuxt Test Setup:
   Use the setup method from @nuxt/test-utils/e2e to initialize the MirageJS server before running your tests.

   // test/my-test.spec.ts
   import { describe, test, beforeAll, afterAll } from 'vitest'
   import { setup, $fetch } from '@nuxt/test-utils/e2e'
   import { setupMirage } from './setupMirage'
   
   describe('My test', async () => {
     let server
   
     beforeAll(async () => {
       server = setupMirage()
       await setup({
         // test context options
       })
     })
   
     afterAll(() => {
       server.shutdown()
     })
   
     test('my test', async () => {
       const response = await $fetch('/api/users')
       expect(response).toEqual({ users: [{ id: 1, name: 'John Doe' }] })
     })
   })

By following these steps, you can effectively mock external API responses for your E2E tests in a Nuxt application using MirageJS ^[1][2].

To continue talking to Dosu, mention @dosu.

[TheDutchCoder]

You can use something like mswjs, but it has issues with mocking the SSR-side of things.
We had to give up on integration/e2e/ testing because of it.

[lewnelson]

I felt this pain. I've just created a tool that solves this problem https://docs.mockybalboa.com/. There's first class support for Nuxt as well as Playwright and Cypress.

It allows you to write your fixtures declaratively within your tests without having to modify any application logic. No proxy servers, no static fixtures, and it supports running tests in parallel. Fixtures are scoped to the client, which means no risk of leaking fixtures outside the tests they were written for.

Here's the example from the Playwright docs on how the mocks are written in the tests. The client guide has more complete documentation on how you can mock requests. It's very similar to and was inspired by the Playwright route API for client side mocking.

import { test, expect } from "@playwright/test";
import { createClient } from "@mocky-balboa/playwright";

test("my page loads", async ({ page, context }) => {
  // Create our Mocky Balboa client and establish a connection with the server
  const client = await createClient(context);

  // Register our fixture on routes matching '**/api/users'
  client.route("**/api/users", (route) => {
    return route.fulfill({
      status: 200,
      body: JSON.stringify([
        { id: "user-1", name: "John Doe" },
        { id: "user-2", name: "Jane Doe" }
      ]),
      headers: {
        "Content-Type": "application/json"
      },
    });
  });

  // Visit the page of our application in the browser
  await page.goto("http://localhost:3000");

  // Our mock above should have been returned on our server
  await expect(page.getByText("John Doe")).toBeVisible();
});