feat: initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,21 @@
+# Next.JS + Cypress + MSW
+
+This is a Next.JS App with Cypress and Mock Service Worker running as well.
+
+The purpose of this repository is to research how to get MSW data applied to server-side fetch requests.
+
+## Project Structure / File Breakdown
+
+- `/cypress`: home to default cypress configurations as well as the e2e tests that are being run to confirm that the mocks are working in an E2E testing environment.
+- `/mocks`: This is where the code to spin up MSW in the browser and node environments exists (in `browser.ts` and `server.ts` respectively). Also home to the two handlers that are being used in the project.
+- `/src/app`: Source folder for Next:
+  - `layout.tsx`: This is where the server-side mocking is being applied. If the runtime is 'nodejs' and the env variable `NEXT_PUBLIC_API_MOCKING` is set to `enabled`, we spin up MSW. Additionally, we are applying the `MswBrowserProvider` component in this file, in order to conditionally run MSW in the browser.
+  - `page.tsx`: This is where both the server-side requests _and_ client-side requests are being rendered. The request to get users is being made here.
+  - `msw-browser-provider.tsx`: This is a wrapper around almost all of our app that renders a 'Suspense' boundary until the browser-side MSW is running, or is deemed unneeded.
+  - `ClientSide.tsx`: This is a client-side component that handles the asynchronous fetching of 'coupon' mock data. It's a pretty straightforward component with a simple `useEffect` that fetches and sets coupon data.
+
+## Running
+
+In order to have mocks applied, the environment variable `NEXT_PUBLIC_API_MOCKING` needs to be set to `enabled`. If this is not set, mocks will **not** be applied.
+
+Inspired by this PR: https://github.com/mswjs/examples/pull/101

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:3000",
+  },
+});

cypress/e2e/app.cy.ts

@@ -0,0 +1,13 @@
+describe("main app", () => {
+  it("should use the mocks serverside", () => {
+    cy.visit("/");
+    // ensure an element with '1 - Darius' is present
+    cy.contains("1 - Darius").should("exist");
+  });
+
+  it("should use the mocks clientside", () => {
+    cy.visit("/");
+    // ensure an element with 'BIGBUCKS' is present
+    cy.contains("BIGBUCKS").should("exist");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from "msw/browser";
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

mocks/handlers.ts

@@ -0,0 +1,16 @@
+import { http, HttpResponse } from "msw";
+
+export const handlers = [
+  http.get("*/mock/public/users", () => {
+    return HttpResponse.json([
+      { id: 1, firstname: "Darius" },
+      { id: 2, firstname: "Kasper" },
+    ]);
+  }),
+  http.get("*/mock/public/coupons", () => {
+    return HttpResponse.json([
+      { id: 1, code: "BIGBUCKS" },
+      { id: 2, code: "BONANZA5" },
+    ]);
+  }),
+];

mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ssr-mocking",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "cypress:open": "cypress open"
+  },
+  "dependencies": {
+    "next": "15.0.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "cypress": "^13.15.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.1",
+    "msw": "^2.5.2",
+    "typescript": "^5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}