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.