Package e2e testing

.github/workflows/tests.yml

@@ -25,11 +25,27 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      # Create cache for Playwright installation
+      - name: Restore Playwright Installation Cache
+        id: playwright-cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm.lock.yaml') }}
+
+        # Install Playwright if pnpm.lock.yaml changed
+      - name: Install Playwright
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install-deps chromium
+
       - name: Lint
         run: pnpm lint
 
       - name: Type check
         run: pnpm type
 
-      - name: Test
+      - name: Unit Test
         run: pnpm test
+
+      - name: Run E2E test
+        run: pnpm e2e

.gitignore

@@ -11,3 +11,6 @@ build
 # misc
 .DS_Store
 *.pem
+
+# e2e storage state
+packages/e2e-testing/__tests__/utils/storageState.json

package.json

@@ -2,7 +2,8 @@
   "name": "create-codes",
   "version": "0.0.0",
   "scripts": {
-    "test": "turbo run build test --filter=!reactjs-boilerplate",
+    "test": "turbo run build --filter=create-codes test --filter=create-codes",
+    "e2e": "turbo run e2e",
     "type": "turbo run type --filter=!reactjs-boilerplate",
     "lint": "turbo run lint --filter=!reactjs-boilerplate"
   },

packages/create-codes/__tests__/cli.test.ts

@@ -58,7 +58,6 @@ describe("create-codes cli", () => {
         "index.html",
         "jest-setup.ts",
         "package.json",
-        "playwright.config.ts",
         "public",
         "src",
         "tests",

packages/create-codes/src/index.ts

@@ -50,7 +50,7 @@ async function run() {
 
   fse.copySync(TEMPLATE_DIR, appDir, {
     filter: (src) =>
-      !["node_modules", "dist", "turbo"].includes(path.basename(src)),
+      !["node_modules", "dist", ".turbo"].includes(path.basename(src)),
   });
   fse.copySync(TEMPLATE_SHARE_DIR, appDir);
 

packages/create-codes/templates/react/package.json

@@ -8,11 +8,11 @@
     "node": ">=16.x"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3000",
     "build": "tsc && vite build",
+    "build:e2e": "tsc && vite build --mode development",
     "lint": "eslint . --ext .js,jsx,.ts,.tsx",
-    "preview": "vite preview",
-    "e2e": "playwright test",
+    "preview": "vite preview --port 3000",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "type": "tsc --noEmit"
@@ -22,13 +22,14 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@playwright/test": "1.29.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/jest": "29.2.6",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.2",
     "@vitejs/plugin-react": "3.0.1",

packages/create-codes/templates/react/src/main.tsx

@@ -5,7 +5,10 @@ import { App } from "@/App";
 import "./main.scss";
 
 const prepare = async (): Promise<void> => {
-  if (import.meta.env.DEV && !import.meta.env.VITE_REACT_APP_API_HOST) {
+  if (
+    (import.meta.env.DEV || import.meta.env.MODE === "development") &&
+    !import.meta.env.VITE_REACT_APP_API_HOST
+  ) {
     const { mockServer } = await import("@/__mocks__/server");
     mockServer.start({
       onUnhandledRequest: "bypass",

packages/create-codes/templates/react/vite.config.ts

@@ -11,7 +11,4 @@ export default defineConfig({
     },
   },
   plugins: [react()],
-  server: {
-    port: 3000,
-  },
 });

packages/create-codes/templates/react/tests/e2e/utils/global-setup.ts → packages/e2e-testing/__tests__/utils/global-setup.ts

@@ -15,7 +15,7 @@ const globalSetup = async (_config: FullConfig) => {
   // Save signed-in state to 'storageState.json'.
   await page
     .context()
-    .storageState({ path: "./tests/e2e/utils/storageState.json" });
+    .storageState({ path: "./__tests__/utils/storageState.json" });
   await browser.close();
 };
 

packages/e2e-testing/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "e2e-testing",
+  "private": true,
+  "scripts": {
+    "e2e:dev": "playwright test",
+    "e2e": "start-server-and-test \"(cd ../.. && ./node_modules/.bin/turbo run preview --filter=reactjs-boilerplate)\" \"3000\" \"playwright test\""
+  },
+  "dependencies": {
+    "@playwright/test": "1.29.2"
+  },
+  "devDependencies": {
+    "start-server-and-test": "1.15.2",
+    "reactjs-boilerplate": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "4.9.4",
+    "@types/node": "18.11.18"
+  }
+}

packages/create-codes/templates/react/playwright.config.ts → packages/e2e-testing/playwright.config.ts

@@ -2,24 +2,22 @@ import { type PlaywrightTestConfig, devices } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
   forbidOnly: !!process.env.CI,
-  testDir: "./tests/e2e",
-  webServer: {
-    command: "yarn dev",
-    port: 3000,
-  },
+  testDir: "__tests__",
   retries: process.env.CI ? 2 : 0,
-  globalSetup: require.resolve("./tests/e2e/utils/global-setup"),
+  globalSetup: require.resolve("./__tests__/utils/global-setup"),
   use: {
     headless: !!process.env.CI,
-    baseURL: "http://localhost:3000/",
     // Tell all tests to load signed-in state from 'storageState.json'.
-    storageState: "./tests/e2e/utils/storageState.json",
+    storageState: "./__tests__/utils/storageState.json",
     trace: "on-first-retry",
   },
   projects: [
     {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      name: "react",
+      use: {
+        baseURL: "http://localhost:3000",
+        ...devices["Desktop Chrome"],
+      },
     },
   ],
 };

packages/e2e-testing/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "tsconfig/library.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["playwright.config.ts", "__tests__"]
+}