Bump up Node.js to v22 (#2410)

* Bump up Node.js to v22

Fixes #2404

* update Playwright to v1.49.0

* fix tests

* one more fix

* fix screenshots

.github/workflows/chakra-npm-publisher.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: '20.17.0'
+          node-version: '22.11.0'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Update package version

.github/workflows/checks.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -62,7 +62,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -101,7 +101,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -133,7 +133,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -171,7 +171,7 @@ jobs:
       (needs.pw_affected_tests.result == 'success' || needs.pw_affected_tests.result == 'skipped') 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.47.2-focal
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
 
     strategy:
       fail-fast: false
@@ -190,7 +190,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          node-version: 22.11.0
           cache: 'yarn'
 
       - name: Cache node_modules

.github/workflows/upload-source-maps.yml

@@ -21,7 +21,7 @@ jobs:
             - name: Setup node
               uses: actions/setup-node@v4
               with:
-                node-version: 20.17.0
+                node-version: 22.11.0
                 cache: 'yarn'
 
             - name: Cache node_modules

.nvmrc

@@ -1 +1 @@
-20.17.0
+22.11.0

Dockerfile

@@ -1,7 +1,7 @@
 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:20.17.0-alpine AS deps
+FROM node:22.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat python3 make g++
 RUN ln -sf /usr/bin/python3 /usr/bin/python
@@ -37,7 +37,7 @@ RUN yarn --frozen-lockfile
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:20.17.0-alpine AS builder
+FROM node:22.11.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
 # pass build args to env variables
@@ -91,7 +91,7 @@ COPY --from=deps /favicon-generator/node_modules ./deploy/tools/favicon-generato
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:20.17.0-alpine AS runner
+FROM node:22.11.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP

package.json

@@ -4,8 +4,8 @@
   "private": false,
   "homepage": "https://github.com/blockscout/frontend#readme",
   "engines": {
-    "node": "20.17.0",
-    "npm": "10.8.2"
+    "node": "22.11.0",
+    "npm": "10.9.0"
   },
   "scripts": {
     "dev": "./tools/scripts/dev.sh",
@@ -26,8 +26,8 @@
     "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
     "test:pw": "./tools/scripts/pw.sh",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
-    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.sh",
-    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.deps.sh",
+    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.sh",
+    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.deps.sh",
     "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
     "test:pw:detect-affected": "node ./deploy/tools/affected-tests/index.js",
     "test:jest": "jest",
@@ -121,8 +121,8 @@
     "@eslint/compat": "1.2.2",
     "@eslint/js": "9.14.0",
     "@next/eslint-plugin-next": "15.0.3",
-    "@playwright/experimental-ct-react": "1.47.2",
-    "@playwright/test": "1.47.2",
+    "@playwright/experimental-ct-react": "1.49.0",
+    "@playwright/test": "1.49.0",
     "@stylistic/eslint-plugin": "2.10.1",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/eslint-plugin-query": "5.60.1",

ui/address/AddressTokens.pw.tsx

@@ -5,6 +5,7 @@ import type { AddressTokensResponse } from 'types/api/address';
 
 import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
+import * as tokenInstance from 'mocks/tokens/tokenInstance';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import { test, expect, devices } from 'playwright/lib';
 
@@ -83,7 +84,9 @@ test('collections +@dark-mode', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('nfts +@dark-mode', async({ render }) => {
+test('nfts +@dark-mode', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -124,7 +127,9 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('nfts', async({ render }) => {
+  test('nfts', async({ render, mockAssetResponse }) => {
+    await mockAssetResponse(tokenInstance.base.image_url as string, './playwright/mocks/image_s.jpg');
+
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },

ui/address/contract/methods/ContractMethodsRegular.pw.tsx

@@ -43,6 +43,7 @@ test('all methods +@dark-mode +@mobile', async({ render }) => {
   const abi: Array<SmartContractMethod> = [ ...methodsMock.read, ...methodsMock.write ];
   const component = await render(<ContractMethodsRegular abi={ abi }/>, { hooksConfig });
   await component.getByText(/expand all/i).click();
+  await expect(component.getByText('HTTP request failed')).toBeVisible();
 
   await expect(component).toHaveScreenshot();
 });

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -38,7 +38,6 @@ test('base view +@dark-mode', async({ render, page }) => {
   );
 
   await page.getByRole('button', { name: /select/i }).click();
-  await page.getByText('USD Coin').hover();
 
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
@@ -78,6 +77,7 @@ test('sort', async({ render, page }) => {
   await page.getByRole('button', { name: /select/i }).click();
   await page.locator('a[aria-label="Sort ERC-20 tokens"]').click();
 
+  await page.mouse.wheel(0, -1000);
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 
   await page.mouse.move(100, 200);