Package e2e testing

.gitignore

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

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

@@ -12,7 +12,6 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext .js,jsx,.ts,.tsx",
     "preview": "vite preview",
-    "e2e": "playwright test",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "type": "tsc --noEmit"
@@ -22,11 +21,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/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__"]
+}