Package e2e testing

.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,7 @@
   "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",
     "type": "turbo run type --filter=!reactjs-boilerplate",
     "lint": "turbo run lint --filter=!reactjs-boilerplate"
   },

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

@@ -52,13 +52,13 @@ describe("create-codes cli", () => {
         ".env.template",
         ".eslintrc.js",
         ".gitignore",
+        ".npmrc",
         "README.md",
         "__mocks__",
         "babel.config.js",
         "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/.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=@types/*

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,11 +22,9 @@
     "@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/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "5.48.2",

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,17 @@
+{
+  "name": "e2e-testing",
+  "private": true,
+  "scripts": {
+    "e2e:dev": "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__"]
+}