Intercepting API calls with NextJS Server Components

[Thor-Herman]

Hello, I need some help mocking an endpoint for some Cypress tests with Next 14.

We are fetching data at the top level of a page using the async await syntax for server components. Something like this:

export default async function Page({ params }: { params: { id: string } }) {
    const response = await fetchData(params.id);

    return <ClientComponent data={response} />
}

I want to mock this fetch for a cypress test, so that we are not actually fetching it from our backend. However, this seems impossible to achieve with intercept because there is no client-side fetch, it's all happening server side and being sent as static HTML.

Is there a best practice for mocking in scenarios like this?

[vtinev]

@Thor-Herman did you find a solution?

[Thor-Herman]

No, unfortunately not :-/

…

On Thu, Feb 29, 2024, 16:51 V. Tinev ***@***.***> wrote: @Thor-Herman <https://github.com/Thor-Herman> did you find a solution? — Reply to this email directly, view it on GitHub <#28469 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKVVXL4MD5D76NKHO4PZU53YV5G7VAVCNFSM6AAAAABAJE3N4GVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DMMZSGY4DS> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[sangmin4208]

@Thor-Herman Did you find any solution?

[Thor-Herman]

Nope :-(

[paolapog]

@Thor-Herman Did you find any solution on this? We are currently stuck on the same problem

[barboramartinkova]

@Thor-Herman no solutions yet? :(

[Thor-Herman]

Nope, I haven't pursued this any longer unfortunately

…

On Thu, May 16, 2024, 15:50 barboramartinkova ***@***.***> wrote: @Thor-Herman <https://github.com/Thor-Herman> no solutions yet? :( — Reply to this email directly, view it on GitHub <#28469 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKVVXL3WZR3MWKX2CO276PTZCS2TTAVCNFSM6AAAAABAJE3N4GVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TINJYGUZDA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[JonJamesDesign]

So I have implemented a solution to this using mockttp.

Let's say you make server calls to some API, and you have the URL for that API stored in your .env file like so:

API_URL=https://jsonplaceholder.typicode.com

Then you make calls in the server components of your NextJS site like so:

const data = await fetch(process.env.API_URL, { /* options here... */ });

So when we run Cypress, we typically spin up an instance of our NextJS site at the same time, right? So what I did is I created a unique script to run my NextJS site in conjunction with Cypress testing, where I redefine the value for the API_URL env; e.g.:

{
  "scripts": {
    "start": "next start";
    "dev": "next dev";
+   "dev:cypress": "API_URL=http://localhost:9000 next dev"
  }
}

Ok so now all my server-to-server API calls are gonna be redirected to localhost:9000 — great, so now I just need figure a way to inspect and return mock responses at that address, and that's where mockttp comes in.

I configured MockTTP like so:

cypress.config.ts

import { defineConfig } from 'cypress';

/* (definition for this file is detailed below) */
import { e2eNodeEvents } from './cypress/support/setupNodeEvents';

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    env: {
      /* make sure the following matches the url and port you defined in your "dev:cypress" script: */
      API_URL: "http://localhost:9000"
    },
    setupNodeEvents: e2eNodeEvents,
    /* The following feature needs to be enabled for this solution to work: */
    experimentalInteractiveRunEvents: true,
  },
});

/cypress/support/setupNodeEvents/mockApiServer.ts

My implementation is for mocking a GraphQL API, but you can modify accordingly for a REST API:

import { getLocal, type Mockttp } from 'mockttp';

class MockApiServer {
  private readonly server: Mockttp;
  private readonly port: number;
  
  constructor() {
    this.server = getLocal();
    this.port = 9000; // < Make sure this matches the port in your custom API_URL env url
  }
  
  reset() {
    this.server.reset();
  }
  
  start() {
    this.server.start(this.port);
    this.server
      .forGet('/')
      .thenReply(STATUS_CODE.OK, 'Mock API server is up')
      .then(() => {
        console.info(`\n📡 Mock API server running on http://localhost:${this.port}\n`);
      });
  }
  
  stop() {
    this.server.stop().then(() => {
      console.info(`📡 Mock API server stopped`);
    });
  }
  
  mockResponse({ operationName, data }: { operationName: string; data: any }) {
    this.server
      .forAnyRequest()
      .withJsonBodyIncluding({ operationName })
      .thenJson(200, { data });
  }
  
  mockErrorResponse({ operationName, message }: { operationName: string; message: string }) {
    this.server
      .forAnyRequest()
      .withJsonBodyIncluding({ operationName })
      .thenJson(500, { error: message });
  }
}

export default MockApiServer;

/cypress/support/setupNodeEvents/index.ts:

Now we can use our mock server with Cypress:

import MockApiServer from './mockApiServer';

export const e2eNodeEvents: Cypress.Config['e2e']['setupNodeEvents'] = (on) => {
  const mockApiServer = new MockApiServer();
  
  on('before:run', () => {
    mockApiServer.start();
  });
  
  on('after:run', () => {
    mockApiServer.stop();
  });
  
  on('task', {
    mockApiResponse({ operationName, data}) {
      mockApiServer.mockResponse({ operationName, data });
      return null; // < important to return null from Cypress node event tasks to signal they're complete; see Cypress docs.
    },
    
    mockApiErrorResponse({ operationName, message }) {
      mockApiServer.mockErrorResponse({ operationName, message });
      return null;
    },
    
    resetApiMocks() {
      mockApiServer.reset();
      return null;
    },
  });
}

Example test.cy.ts file

Now you can stub-out mock responses on a per-test basis in cypress tests like so:

describe('Mock server-to-server API response tests example', () => {
  it('Stubs out a server-side API request', () => {
    cy.task('mockApiResponse', {
      operationName: 'GetActiveUser',
      data: { id: 123, name: 'Jon'  },
    });
    
    cy.visit('/user');
    cy.get('#user-name').should('contain.text', 'Jon');
  });
  
  it('Stubs out error response for server-side API request', () => {
    cy.task('mockApiErrorResponse', {
      operationName: 'GetActiveUser',
      message: 'User not found',
    });
    
    cy.visit('/user');
    cy.get('#error-msg').should('contain.text', 'User not found');
  });
  
  afterEach(() => {
    cy.task('resetApiMocks');
  });
});