Add test cases

Author: mayank1513

lib/esbuild-plugin-react18-css-example/src/client/star-me/star-me.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import styles from "./star-me.module.css";
 
 interface StarMeProps extends React.HTMLAttributes<HTMLButtonElement> {
   gitHubUrl: string;
@@ -15,7 +16,12 @@ export function StarMe({ gitHubUrl, onClick, children, ...props }: StarMeProps)
     onClick?.(e);
   };
   return (
-    <button data-testid="star-me-h1" onClick={starMe} type="button" {...props}>
+    <button
+      data-testid="star-me-h1"
+      onClick={starMe}
+      type="button"
+      {...props}
+      className={styles.starMe}>
       {children || "Star Me"}
     </button>
   );

lib/esbuild-plugin-react18-css/.gitignore

@@ -0,0 +1 @@
+test-build*

lib/esbuild-plugin-react18-css/__tests__/esbuild.test.ts

@@ -0,0 +1,68 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, test, beforeAll, afterAll } from "vitest";
+import esbuild from "esbuild";
+import cssPlugin from "../src";
+import glob from "tiny-glob";
+
+describe("Test plugin with esbuild", async () => {
+  const exampleBuildDir = path.resolve(process.cwd(), "test-build1");
+
+  beforeAll(async () => {
+    await esbuild.build({
+      format: "cjs",
+      target: "es2019",
+      sourcemap: false,
+      bundle: true,
+      minify: true,
+      plugins: [cssPlugin()],
+      entryPoints: await glob("../esbuild-plugin-react18-css-example/src/**/*.*"),
+      external: ["react", "react-dom"],
+      outdir: "./test-build1",
+    });
+  });
+
+  test(`Test CSS Class Hash`, ({ expect }) => {
+    const text = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.js"), "utf-8");
+    expect(/{fork:["'][^"']*fork[^"']*["']/.test(text)).toBe(true);
+  });
+
+  test("Should contain -moz-", ({ expect }) => {
+    const test = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.css"), "utf-8");
+    expect(/-moz-/.test(test)).toBe(true);
+  });
+});
+
+describe("Test plugin with esbuild and options", async () => {
+  const exampleBuildDir = path.resolve(process.cwd(), "test-build");
+
+  beforeAll(async () => {
+    await esbuild.build({
+      format: "cjs",
+      target: "es2019",
+      sourcemap: false,
+      bundle: true,
+      minify: true,
+      plugins: [
+        cssPlugin({
+          skipAutoPrefixer: true,
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        }),
+      ],
+      entryPoints: await glob("../esbuild-plugin-react18-css-example/src/**/*.*"),
+      publicPath: "https://my.domain/static/",
+      external: ["react", "react-dom"],
+      outdir: "./test-build",
+    });
+  });
+
+  test(`Test CSS Class Hash`, ({ expect }) => {
+    const text = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.js"), "utf-8");
+    expect(/{fork:["'][^"']*fork[^"']*["']/.test(text)).toBe(true);
+  });
+
+  test("Should not contain -moz-", ({ expect }) => {
+    const test = fs.readFileSync(path.resolve(exampleBuildDir, "index.css"), "utf-8");
+    expect(/-moz-/.test(test)).toBe(false);
+  });
+});

lib/esbuild-plugin-react18-css/__tests__/tsup.test.ts

@@ -0,0 +1,17 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, test } from "vitest";
+
+/** testing tsup example - make sure it is build before running this test suit */
+describe("Test plugin with tsup", () => {
+  const exampleBuildDir = path.resolve(
+    process.cwd(),
+    "..",
+    "esbuild-plugin-react18-css-example",
+    "dist",
+  );
+  test(`Test CSS Class Hash`, ({ expect }) => {
+    const text = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.js"), "utf-8");
+    expect(/{fork:["'][^"']*fork-me__fork[^"']*["']/.test(text)).toBe(true);
+  });
+});

lib/esbuild-plugin-react18-css/package.json

@@ -39,6 +39,7 @@
     "@types/node": "^20.11.22",
     "@vitest/coverage-v8": "^1.3.1",
     "esbuild": "^0.20.2",
+    "tiny-glob": "^0.2.9",
     "tsup": "^8.0.2",
     "typescript": "^5.4.2",
     "vitest": "^1.3.1"

lib/esbuild-plugin-react18-css/src/index.ts

@@ -127,6 +127,7 @@ const cssPlugin: (options?: CSSModulePluginOptions) => Plugin = (options = {}) =
   name: "esbuild-plugin-react18-css-" + uuid(),
   setup(build): void {
     const write = build.initialOptions.write;
+    build.initialOptions.write = false;
     if (!options.generateScopedName) {
       const globalPrefix = options.globalPrefix ?? "";
       options.generateScopedName = (name, filename) =>

lib/esbuild-plugin-react18-css/vitest.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   test: {
     globals: true,
+    exclude: ["node_modules", "test-build", "test-build1"],
     coverage: {
       include: ["src/**"],
       reporter: ["text", "json", "clover", "html"],