Add concurrency tests (#13)

* add concurrency tests

* add test to ensure no console log leakage between RSC rendered components

* add test to ensure that console logs are not captured from outside the component

* add a specific test for a known bug at React

* add a test to ensure that onError callback doesn't have log leakage bug

* add concurrency tests for html generation

* update test:non-rsc script

* add concurrent tests

* add unit tests workflow

* install pnpm at the tests worflow

* use yarn instead of pnpm

* install yarn packages

* Empty commit

* fix syntax error at the workflow file

* make tests compatible with react v19.2.1

* downgrade jest to 29.7.0

* tiny changes to make tests more resilliance

Author: AbanoubGhadban

.github/workflows/unit-tests.yml

@@ -0,0 +1,15 @@
+name: Run unit tests (jest)
+on: [pull_request]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install packages using yarn
+        run: yarn
+      - run: yarn test

jest.config.js

@@ -0,0 +1,16 @@
+const { createDefaultPreset } = require("ts-jest");
+
+const tsJestTransformCfg = createDefaultPreset().transform;
+
+/** @type {import("jest").Config} **/
+module.exports = {
+  testEnvironment: "node",
+  transform: {
+    ...tsJestTransformCfg,
+  },
+  // Override: Package-specific test directory
+  testMatch: ['<rootDir>/tests/**/?(*.)+(spec|test).[jt]s?(x)'],
+  testEnvironmentOptions: {
+    customExportConditions: process.env.NODE_CONDITIONS?.split(',') ?? [],
+  },
+};

package.json

@@ -61,6 +61,9 @@
     "README.md"
   ],
   "scripts": {
+    "test": "yarn test:rsc && yarn test:non-rsc",
+    "test:rsc": "NODE_CONDITIONS=react-server jest tests/*.rsc.test.*",
+    "test:non-rsc": "jest tests --testPathIgnorePatterns=\".*\\.rsc\\.test\\..*\"",
     "build": "rm -rf dist tsconfig.tsbuildinfo && yarn run tsc",
     "prepublishOnly": "yarn run build",
     "build-if-needed": "[ -f dist/client.js ] || (yarn run build >/dev/null 2>&1 || true) && [ -f dist/client.js ] || { echo 'Build failed'; }",
@@ -69,6 +72,13 @@
   },
   "devDependencies": {
     "@tsconfig/node14": "^14.1.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "jest": "^29.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "ts-jest": "^29.4.5",
     "typescript": "^5.4.3",
     "webpack": "^5.98.0"
   },

tests/AsyncQueue.ts

@@ -0,0 +1,73 @@
+import * as EventEmitter from 'node:events';
+
+const debounce = <T extends unknown[]>(
+  callback: (...args: T) => void,
+  delay: number,
+) => {
+  let timeoutTimer: ReturnType<typeof setTimeout>;
+ 
+  return (...args: T) => {
+    clearTimeout(timeoutTimer);
+ 
+    timeoutTimer = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+};
+
+class AsyncQueue {
+  private eventEmitter = new EventEmitter<{ data: any, end: any }>();
+  private buffer: string = '';
+  private isEnded = false;
+
+  enqueue(value: string) {
+    if (this.isEnded) {
+      throw new Error("Queue Ended");
+    }
+
+    this.buffer += value;
+    this.eventEmitter.emit('data', value);
+  }
+
+  end() {
+    this.isEnded = true;
+    this.eventEmitter.emit('end');
+  }
+
+  dequeue() {
+    return new Promise<string>((resolve, reject) => {
+      if (this.isEnded) {
+        reject(new Error("Queue Ended"));
+        return;
+      }
+
+      const checkBuffer = debounce(() => {
+        const teardown = () => {
+          this.eventEmitter.off('data', checkBuffer);
+          this.eventEmitter.off('end', checkBuffer);
+        }
+        
+        if (this.buffer.length > 0) {
+          resolve(this.buffer);
+          this.buffer = '';
+          teardown();
+        } else if (this.isEnded) {
+          reject(new Error('Queue Ended'));
+          teardown();
+        }
+      }, 250);
+
+      if (this.buffer.length > 0) {
+        checkBuffer();
+      }
+      this.eventEmitter.on('data', checkBuffer);
+      this.eventEmitter.on('end', checkBuffer);
+    })
+  }
+
+  toString() {
+    return ""
+  }
+}
+
+export default AsyncQueue;

tests/AsyncQueueContainer.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Suspense, PropsWithChildren } from 'react';
+
+import AsyncQueue from './AsyncQueue';
+
+const AsyncQueueItem = async ({ asyncQueue, children  }: PropsWithChildren<{asyncQueue: AsyncQueue}>) => {
+  const value = await asyncQueue.dequeue();
+
+  return (
+    <>
+      <p>Data: {value}</p>
+      {children}
+    </>
+  )
+}
+
+const AsyncQueueContainer = ({ asyncQueue }: { asyncQueue: AsyncQueue }) => {
+  return (
+    <div>
+      <h1>Async Queue</h1>
+      <Suspense fallback={<p>Loading Item1</p>}>
+        <AsyncQueueItem asyncQueue={asyncQueue}>
+          <Suspense fallback={<p>Loading Item2</p>}>
+            <AsyncQueueItem asyncQueue={asyncQueue}>
+              <Suspense fallback={<p>Loading Item3</p>}>
+                <AsyncQueueItem asyncQueue={asyncQueue} />
+              </Suspense>
+            </AsyncQueueItem>
+          </Suspense>
+        </AsyncQueueItem>
+      </Suspense>
+    </div>
+  )
+}
+
+export default AsyncQueueContainer;

tests/StreamReader.ts

@@ -0,0 +1,34 @@
+import { PassThrough, Readable } from 'node:stream';
+import AsyncQueue from './AsyncQueue';
+
+class StreamReader {
+  private asyncQueue: AsyncQueue;
+
+  constructor(pipeableStream: Pick<Readable, 'pipe'>) {
+    this.asyncQueue = new AsyncQueue();
+    const decoder = new TextDecoder();
+
+    const readableStream = new PassThrough();
+    pipeableStream.pipe(readableStream);
+
+    readableStream.on('data', (chunk) => {
+      const decodedChunk = decoder.decode(chunk, { stream: true });
+      this.asyncQueue.enqueue(decodedChunk);
+    });
+
+    readableStream.on('end', () => {
+      // Flush any remaining bytes in the decoder
+      const remaining = decoder.decode();
+      if (remaining) {
+        this.asyncQueue.enqueue(remaining);
+      }
+      this.asyncQueue.end();
+    });
+  }
+
+  nextChunk() {
+    return this.asyncQueue.dequeue();
+  }
+}
+
+export default StreamReader;