Migration to Playwright

.github/workflows/testandlint.yml

@@ -1,35 +1,38 @@
 name: Test and lint
 
 on:
-  push:
-    branches-ignore:
-      - 'rc-**'
+    push:
+        branches-ignore:
+            - 'rc-**'
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache node modules
-        uses: actions/cache@v4
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - name: Prepare
-        run: npm install
-
-      - name: Test
-        run: npm run test:build
-
-      - name: ESLint
-        run: npm run lint
+    build:
+        runs-on: ubuntu-latest
+        timeout-minutes: 20
+
+        steps:
+            - uses: actions/checkout@v2
+
+            - name: Cache node modules
+              uses: actions/cache@v4
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-build-${{ env.cache-name }}-
+                      ${{ runner.os }}-build-
+                      ${{ runner.os }}-
+
+            - name: Prepare
+              run: npm ci
+
+            - name: Install Playwright Browsers
+              run: npx playwright install --with-deps
+
+            - name: Test
+              run: npx playwright test
+
+            - name: ESLint
+              run: npm run lint

.gitignore

@@ -1,3 +1,10 @@
 /node_modules
 /src/__image_snapshots__/__diff_output__
-.DS_STORE
+.DS_STORE
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -3,24 +3,18 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@testing-library/react": "^14.2.1",
-        "@types/jest": "^29.5.12",
-        "@types/jest-image-snapshot": "^6.4.0",
         "@types/node": "^20.11.25",
         "@types/react": "^18.2.64",
         "@types/react-dom": "^18.2.21",
         "@vitejs/plugin-react": "^4.2.1",
         "eslint": "^8.57.0",
         "eslint-config-react-app": "^7.0.1",
         "husky": "^9.0.11",
-        "jest": "^29.7.0",
-        "jest-image-snapshot": "^6.4.0",
         "prettier": "^3.2.5",
         "pretty-quick": "^4.0.0",
         "puppeteer": "^24.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "ts-jest": "^29.1.2",
         "typescript": "^5.4.2",
         "vite": "^5.1.5",
         "vite-plugin-eslint": "^1.8.1",
@@ -31,8 +25,7 @@
         "lint": "eslint ./src",
         "build": "tsc && vite build",
         "preview": "vite preview",
-        "test": "jest --watchAll",
-        "test:build": "jest",
+        "test": "playwright test",
         "prepare": "husky install"
     },
     "browserslist": {
@@ -47,14 +40,7 @@
             "last 1 safari version"
         ]
     },
-    "jest": {
-        "preset": "ts-jest/presets/js-with-ts",
-        "moduleNameMapper": {
-            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-        },
-        "modulePaths": [
-            "<rootDir>/src"
-        ]
+    "devDependencies": {
+        "@playwright/test": "^1.51.1"
     }
 }

playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './src',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        // baseURL: 'http://127.0.0.1:3000',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+    ],
+});

src/App.test.ts

@@ -1,43 +1,14 @@
-import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
-import puppeteer, { Page, Browser } from 'puppeteer';
+import { test, expect } from '@playwright/test';
 import path from 'path';
 
-const customConfig = { threshold: 0 };
-const toMatchImageSnapshot = configureToMatchImageSnapshot({
-    customDiffConfig: customConfig,
-    noColors: true,
+test('Рисуется нужное изображение', async ({ page }) => {
+    await page.goto(`file:${path.join(__dirname, '/..', 'index.html')}`);
+    await expect(page).toHaveScreenshot();
 });
 
-let browser: Browser;
+test('Верстка не тронута', async ({ page }) => {
+    await page.goto(`file:${path.join(__dirname, '/..', 'index.html')}`);
+    const container = await page.evaluate(() => document.body.innerHTML);
 
-beforeAll(async () => {
-    browser = await puppeteer.launch({
-        args: ['--no-sandbox'],
-    });
-});
-
-afterAll(async () => {
-    await browser.close();
-});
-
-expect.extend({ toMatchImageSnapshot });
-
-describe('Grid', () => {
-    let page: Page;
-    beforeEach(async () => {
-        page = await browser.newPage();
-        await page.goto(`file:${path.join(__dirname, '/..', 'index.html')}`);
-    });
-
-    it('Верстка не тронута', async () => {
-        const container = await page.evaluate(() => document.body.innerHTML);
-
-        expect(container).toMatchSnapshot();
-    });
-
-    /*it('Рисуется нужное изображение', async () => {
-        const image = await page.screenshot();
-
-        expect(image).toMatchImageSnapshot();
-    });*/
+    expect(container).toMatchSnapshot();
 });

src/__snapshots__/App.test.ts.snap → src/App.test.ts-snapshots/Верстка-не-тронута-1-chromium-darwin.txt

@@ -1,7 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Grid Верстка не тронута 1`] = `
-"
         <section class="grid-container">
             <div></div>
             <div></div>
@@ -11,5 +8,3 @@ exports[`Grid Верстка не тронута 1`] = `
         </section>
 
 
-"
-`;