feat: add Next.js 16.0.3 integration test environment and build artifacts for cache components

Author: JannikZed

src/CacheComponentsHandler.ts

@@ -2,6 +2,6 @@ import { describe, it } from 'vitest';
 
 describe('Example Test', () => {
   it('should work correctly', () => {
-    console.log("TODO tests")
+    console.log('TODO tests');
   });
 });

src/index.test.ts

@@ -2,3 +2,8 @@ import CachedHandler from './CachedHandler';
 export default CachedHandler;
 import RedisStringsHandler from './RedisStringsHandler';
 export { RedisStringsHandler };
+import {
+  redisCacheHandler,
+  getRedisCacheComponentsHandler,
+} from './CacheComponentsHandler';
+export { redisCacheHandler, getRedisCacheComponentsHandler };

src/index.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { spawn, ChildProcess } from 'child_process';
+import { createClient, RedisClientType } from 'redis';
+import path from 'path';
+
+const PORT = 3055;
+const BASE_URL = `http://localhost:${PORT}`;
+
+describe('Next.js 16 Cache Components Integration', () => {
+  let nextProcess: ChildProcess;
+  let redisClient: RedisClientType;
+  let keyPrefix: string;
+
+  beforeAll(async () => {
+    // Connect to Redis
+    redisClient = createClient({
+      url: process.env.REDIS_URL || 'redis://localhost:6379',
+      database: 1,
+    });
+    await redisClient.connect();
+
+    // Generate unique key prefix for this test run
+    keyPrefix = `cache-components-test-${Math.random().toString(36).substring(7)}`;
+    process.env.VERCEL_URL = keyPrefix;
+
+    // Build and start Next.js app
+    const appDir = path.join(__dirname, 'next-app-16-0-3-cache-components');
+
+    console.log('Building Next.js app...');
+    await new Promise<void>((resolve, reject) => {
+      const buildProcess = spawn('pnpm', ['build'], {
+        cwd: appDir,
+        stdio: 'inherit',
+      });
+
+      buildProcess.on('close', (code) => {
+        if (code === 0) resolve();
+        else reject(new Error(`Build failed with code ${code}`));
+      });
+    });
+
+    console.log('Starting Next.js app...');
+    nextProcess = spawn('pnpm', ['start', '-p', PORT.toString()], {
+      cwd: appDir,
+      env: { ...process.env, VERCEL_URL: keyPrefix },
+    });
+
+    // Wait for server to be ready
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+  }, 120000);
+
+  afterAll(async () => {
+    // Clean up Redis keys
+    const keys = await redisClient.keys(`${keyPrefix}*`);
+    if (keys.length > 0) {
+      await redisClient.del(keys);
+    }
+    await redisClient.quit();
+
+    // Kill Next.js process
+    if (nextProcess) {
+      nextProcess.kill();
+    }
+  });
+
+  describe('Basic use cache functionality', () => {
+    it('should cache data and return same counter value on subsequent requests', async () => {
+      // First request
+      const res1 = await fetch(`${BASE_URL}/api/cached-static-fetch`);
+      const data1 = await res1.json();
+
+      expect(data1.counter).toBe(1);
+
+      // Second request should return cached data
+      const res2 = await fetch(`${BASE_URL}/api/cached-static-fetch`);
+      const data2 = await res2.json();
+
+      expect(data2.counter).toBe(1); // Same counter value
+      expect(data2.timestamp).toBe(data1.timestamp); // Same timestamp
+    });
+
+    it('should store cache entry in Redis', async () => {
+      await fetch(`${BASE_URL}/api/cached-static-fetch`);
+
+      // Check Redis for cache keys
+      const keys = await redisClient.keys(`${keyPrefix}*`);
+      expect(keys.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('cacheTag functionality', () => {
+    it('should cache data with tags', async () => {
+      const res1 = await fetch(`${BASE_URL}/api/cached-with-tag`);
+      const data1 = await res1.json();
+
+      expect(data1.counter).toBeDefined();
+
+      // Second request should return cached data
+      const res2 = await fetch(`${BASE_URL}/api/cached-with-tag`);
+      const data2 = await res2.json();
+
+      expect(data2.counter).toBe(data1.counter);
+    });
+
+    it('should invalidate cache when tag is revalidated (Stale while revalidate)', async () => {
+      // Get initial cached data
+      const res1 = await fetch(`${BASE_URL}/api/cached-with-tag`);
+      const data1 = await res1.json();
+
+      // Revalidate the tag
+      await fetch(`${BASE_URL}/api/revalidate-tag`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tag: 'test-tag' }),
+      });
+
+      // The cache should be invalidated - verify by making multiple requests
+      // until we get fresh data (with retries for async revalidation)
+      let freshDataReceived = false;
+      for (let i = 0; i < 5; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        const res = await fetch(`${BASE_URL}/api/cached-with-tag`);
+        const data = await res.json();
+
+        if (data.counter > data1.counter && data.timestamp > data1.timestamp) {
+          freshDataReceived = true;
+          break;
+        }
+      }
+
+      expect(freshDataReceived).toBe(true);
+    });
+  });
+
+  describe('Redis cache handler integration', () => {
+    it('should call cache handler get and set methods', async () => {
+      // Make request to trigger cache (don't clear first)
+      await fetch(`${BASE_URL}/api/cached-static-fetch`);
+
+      // Verify Redis has the cached data
+      const redisKeys = await redisClient.keys(`${keyPrefix}*`);
+      expect(redisKeys.length).toBeGreaterThan(0);
+
+      // Filter out hash keys (sharedTagsMap) and only check string keys (cache entries)
+      // Try to get each key and verify at least one is a string value
+      let foundStringKey = false;
+      for (const key of redisKeys) {
+        try {
+          const type = await redisClient.type(key);
+          if (type === 'string') {
+            const cachedValue = await redisClient.get(key);
+            if (cachedValue) {
+              foundStringKey = true;
+              expect(cachedValue).toBeTruthy();
+              break;
+            }
+          }
+        } catch (e) {
+          // Skip non-string keys
+        }
+      }
+      expect(foundStringKey).toBe(true);
+    });
+  });
+});

test/integration/cache-components.integration.test.ts

@@ -0,0 +1,41 @@
+# 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*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

test/integration/next-app-16-0-3-cache-components/.gitignore

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

test/integration/next-app-16-0-3-cache-components/README.md

@@ -0,0 +1,5 @@
+const { redisCacheHandler } = require('@trieb.work/nextjs-turbo-redis-cache');
+
+console.log('Cache handler module loaded!');
+
+module.exports = redisCacheHandler;

test/integration/next-app-16-0-3-cache-components/cache-handler.js

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

test/integration/next-app-16-0-3-cache-components/eslint.config.mjs

@@ -0,0 +1,10 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+  cacheHandlers: {
+    default: require.resolve('./cache-handler.js'),
+  },
+};
+
+export default nextConfig;

test/integration/next-app-16-0-3-cache-components/next.config.ts

@@ -0,0 +1,28 @@
+{
+  "name": "next-app-16-0-3",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@trieb.work/nextjs-turbo-redis-cache": "file:../../../",
+    "next": "16.0.3",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "redis": "4.7.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}