Foo bar Manchubar

.gitignore

@@ -1,3 +1,4 @@
+/test-results
 /node_modules
 .env
 .env.*

e2e/welcome.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test";
+
+test("should navigate to the about page", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("h1")).toContainText("Hardcore React Training");
+});

jest.config.mjs

@@ -0,0 +1,18 @@
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./"
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  testEnvironment: "jest-environment-jsdom"
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

package.json

@@ -5,6 +5,7 @@
   "main": "src",
   "scripts": {
     "test": "jest",
+    "test:e2e": "playwright test",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
@@ -51,6 +52,7 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.6.1",
+    "@playwright/test": "^1.32.3",
     "@storybook/addon-essentials": "^7.0.7",
     "@storybook/addon-interactions": "^7.0.7",
     "@storybook/addon-links": "^7.0.7",
@@ -59,13 +61,16 @@
     "@storybook/react": "^7.0.7",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.1",
     "@types/luxon": "^3.3.0",
     "@types/node": "^18.16.0",
     "@types/ramda": "^0.29.0",
     "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/three": "^0.150.2",
     "@typescript-eslint/eslint-plugin": "5.59.0",
     "@typescript-eslint/parser": "5.59.0",
@@ -81,6 +86,8 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "^0.6.11",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^21.1.1",
     "msw": "^1.2.1",
     "prettier": "^2.8.8",

playwright.config.ts

@@ -0,0 +1,77 @@
+import { PlaywrightTestConfig, devices } from "@playwright/test";
+import path from "path";
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000;
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`;
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Test directory
+  testDir: path.join(__dirname, "e2e"),
+  // If a test fails, retry it additional 2 times
+  retries: 2,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: "test-results/",
+
+  // Run your local dev server before starting the tests:
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: "npm run dev",
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  },
+
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: "retry-with-trace"
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // },
+  },
+
+  projects: [
+    {
+      name: "Desktop Chrome",
+      use: {
+        ...devices["Desktop Chrome"]
+      }
+    },
+    // {
+    //   name: 'Desktop Firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    // {
+    //   name: 'Desktop Safari',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+    // Test against mobile viewports.
+    {
+      name: "Mobile Chrome",
+      use: {
+        ...devices["Pixel 5"]
+      }
+    },
+    {
+      name: "Mobile Safari",
+      use: devices["iPhone 12"]
+    }
+  ]
+};
+export default config;