Upgrade pixelmatch to v7 and refactor imports

pashidlos · pashidlos · commit daa54043a838 · 2025-11-04T21:48:09.000+02:00
Upgraded the 'pixelmatch' dependency to version 7.1.0 and removed '@types/pixelmatch' as types are now included. Refactored PixelmatchService to use dynamic import for pixelmatch, updated related tests to mock the new import pattern, and adjusted Jest configs to handle ESM modules. Also updated TypeScript configs to use 'NodeNext' module resolution and added 'isolatedModules'. Minor import type-only refactors were made for improved type safety.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "passport-local": "^1.0.0",
     "pg": "^8.16.3",
     "pg-hstore": "^2.3.4",
-    "pixelmatch": "^5.3.0",
+    "pixelmatch": "^7.1.0",
     "pngjs": "^7.0.0",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^5.0.1",
@@ -79,7 +79,6 @@
     "@types/node": "^20.14.10",
     "@types/passport-jwt": "^3.0.9",
     "@types/passport-local": "^1.0.38",
-    "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
     "@types/supertest": "^2.0.12",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -1,5 +1,6 @@
 generator client {
   provider = "prisma-client-js"
+  output   = "../node_modules/.prisma/client"
   binaryTargets = ["native", "debian-openssl-3.0.x", "linux-arm64-openssl-3.0.x"]
 }
 
diff --git a/prisma/tsconfig.json b/prisma/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "NodeNext",
     "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,
@@ -11,6 +11,7 @@
     "incremental": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
     // See: https://github.com/prisma/prisma/issues/10203
     "strictNullChecks": true
   },
diff --git a/src/builds/builds.controller.ts b/src/builds/builds.controller.ts
@@ -23,7 +23,7 @@ import { Build, Role } from '@prisma/client';
 import { BuildDto } from './dto/build.dto';
 import { MixedGuard } from '../auth/guards/mixed.guard';
 import { PaginatedBuildDto } from './dto/build-paginated.dto';
-import { ModifyBuildDto } from './dto/build-modify.dto';
+import type { ModifyBuildDto } from './dto/build-modify.dto';
 import { ProjectsService } from '../projects/projects.service';
 import { RoleGuard } from '../auth/guards/role.guard';
 import { Roles } from '../shared/roles.decorator';
diff --git a/src/builds/builds.service.spec.ts b/src/builds/builds.service.spec.ts
@@ -3,12 +3,11 @@ import { BuildsService } from './builds.service';
 import { PrismaService } from '../prisma/prisma.service';
 import { TestRunsService } from '../test-runs/test-runs.service';
 import { EventsGateway } from '../shared/events/events.gateway';
-import { Build, TestRun, TestStatus } from '@prisma/client';
+import { Build, Prisma, TestRun, TestStatus } from '@prisma/client';
 import { mocked, MockedObject } from 'jest-mock';
 import { BuildDto } from './dto/build.dto';
 import { ProjectsService } from '../projects/projects.service';
 import { generateTestRun } from '../_data_';
-import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
 
 jest.mock('./dto/build.dto');
 
@@ -387,7 +386,7 @@ describe('BuildsService', () => {
     it('create with retry', async () => {
       const buildUpsertMock = jest
         .fn()
-        .mockRejectedValueOnce(new PrismaClientKnownRequestError('mock error', { code: 'P2002', clientVersion: '5' }));
+        .mockRejectedValueOnce(new Prisma.PrismaClientKnownRequestError('mock error', { code: 'P2002', clientVersion: '5' }));
       const buildUpdateMock = jest.fn().mockResolvedValueOnce(build);
       service = await initService({ buildUpsertMock, buildUpdateMock });
       service.incrementBuildNumber = jest.fn().mockResolvedValueOnce(build);
diff --git a/src/compare/libs/pixelmatch/pixelmatch.service.spec.ts b/src/compare/libs/pixelmatch/pixelmatch.service.spec.ts
@@ -1,14 +1,12 @@
 import { TestingModule, Test } from '@nestjs/testing';
 import { TestStatus } from '@prisma/client';
-import Pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
-import { mocked } from 'jest-mock';
 import { StaticService } from '../../../static/static.service';
 import { DIFF_DIMENSION_RESULT, EQUAL_RESULT, NO_BASELINE_RESULT } from '../consts';
 import { DEFAULT_CONFIG, PixelmatchService } from './pixelmatch.service';
 import { PixelmatchConfig } from './pixelmatch.types';
 
-jest.mock('pixelmatch');
+const mockPixelmatch = jest.fn();
 
 const initService = async ({ getImageMock = jest.fn(), saveImageMock = jest.fn(), deleteImageMock = jest.fn() }) => {
   const module: TestingModule = await Test.createTestingModule({
@@ -25,7 +23,12 @@ const initService = async ({ getImageMock = jest.fn(), saveImageMock = jest.fn()
     ],
   }).compile();
 
-  return module.get<PixelmatchService>(PixelmatchService);
+  const service = module.get<PixelmatchService>(PixelmatchService);
+  
+  // Spy on loadPixelmatch to return our mock instead of dynamic import
+  jest.spyOn(service as any, 'loadPixelmatch').mockResolvedValue(mockPixelmatch);
+  
+  return service;
 };
 
 let service: PixelmatchService;
@@ -123,7 +126,7 @@ describe('getDiff', () => {
     const getImageMock = jest.fn().mockReturnValueOnce(image).mockReturnValueOnce(baseline);
     const diffName = 'diff name';
     const saveImageMock = jest.fn().mockReturnValueOnce(diffName);
-    mocked(Pixelmatch).mockReturnValueOnce(5);
+    mockPixelmatch.mockReturnValueOnce(5);
     service = await initService({ saveImageMock, getImageMock });
 
     const result = await service.getDiff(
@@ -141,7 +144,7 @@ describe('getDiff', () => {
       }
     );
 
-    expect(mocked(Pixelmatch)).toHaveBeenCalledWith(
+    expect(mockPixelmatch).toHaveBeenCalledWith(
       new PNG({
         width: 2,
         height: 5,
@@ -185,7 +188,7 @@ describe('getDiff', () => {
     const saveImageMock = jest.fn();
     service = await initService({ saveImageMock, getImageMock });
     const pixelMisMatchCount = 150;
-    mocked(Pixelmatch).mockReturnValueOnce(pixelMisMatchCount);
+    mockPixelmatch.mockReturnValueOnce(pixelMisMatchCount);
 
     const result = await service.getDiff(
       {
@@ -220,7 +223,7 @@ describe('getDiff', () => {
     });
     const getImageMock = jest.fn().mockReturnValueOnce(image).mockReturnValueOnce(baseline);
     const pixelMisMatchCount = 200;
-    mocked(Pixelmatch).mockReturnValueOnce(pixelMisMatchCount);
+    mockPixelmatch.mockReturnValueOnce(pixelMisMatchCount);
     const diffName = 'diff name';
     const saveImageMock = jest.fn().mockReturnValueOnce(diffName);
     service = await initService({
diff --git a/src/compare/libs/pixelmatch/pixelmatch.service.ts b/src/compare/libs/pixelmatch/pixelmatch.service.ts
@@ -1,6 +1,5 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { TestStatus } from '@prisma/client';
-import Pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
 import { StaticService } from '../../../static/static.service';
 import { DiffResult } from '../../../test-runs/diffResult';
@@ -18,11 +17,18 @@ export class PixelmatchService implements ImageComparator {
 
   constructor(private readonly staticService: StaticService) {}
 
+  protected async loadPixelmatch() {
+    const { default: pixelmatch } = await import('pixelmatch');
+    return pixelmatch;
+  }
+
   parseConfig(configJson: string): PixelmatchConfig {
     return parseConfig(configJson, DEFAULT_CONFIG, this.logger);
   }
 
   async getDiff(data: ImageCompareInput, config: PixelmatchConfig): Promise<DiffResult> {
+    const pixelmatch = await this.loadPixelmatch();
+    
     const result: DiffResult = {
       ...NO_BASELINE_RESULT,
     };
@@ -58,10 +64,17 @@ export class PixelmatchService implements ImageComparator {
       width: maxWidth,
       height: maxHeight,
     });
-    result.pixelMisMatchCount = Pixelmatch(baselineIgnored.data, imageIgnored.data, diff.data, maxWidth, maxHeight, {
-      includeAA: config.ignoreAntialiasing,
-      threshold: config.threshold,
-    });
+    result.pixelMisMatchCount = pixelmatch(
+      baselineIgnored.data as Uint8Array,
+      imageIgnored.data as Uint8Array,
+      diff.data as Uint8Array,
+      maxWidth,
+      maxHeight,
+      {
+        includeAA: config.ignoreAntialiasing,
+        threshold: config.threshold,
+      }
+    );
     result.diffPercent = (result.pixelMisMatchCount * 100) / (scaledImage.width * scaledImage.height);
 
     // process result
diff --git a/src/jest.config.ts b/src/jest.config.ts
@@ -7,6 +7,9 @@ module.exports = async () => {
     transform: {
       '^.+\\.(t|j)s$': 'ts-jest',
     },
+    transformIgnorePatterns: [
+      'node_modules/(?!(pixelmatch)/)',
+    ],
     coverageDirectory: '../coverage',
     testEnvironment: 'node',
   };
diff --git a/src/static/static.controller.ts b/src/static/static.controller.ts
@@ -1,5 +1,5 @@
 import { Controller, Get, Logger, Param, Res } from '@nestjs/common';
-import { Response } from 'express';
+import type { Response } from 'express';
 import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
 import { StaticService } from './static.service';
 
diff --git a/src/test-runs/test-runs.controller.ts b/src/test-runs/test-runs.controller.ts
@@ -25,7 +25,8 @@ import {
   ApiBody,
 } from '@nestjs/swagger';
 import { JwtAuthGuard } from '../auth/guards/auth.guard';
-import { Role, TestRun, TestStatus, User } from '@prisma/client';
+import { Role, TestRun, TestStatus } from '@prisma/client';
+import type { User } from '@prisma/client';
 import { TestRunsService } from './test-runs.service';
 import { TestRunResultDto } from './dto/testRunResult.dto';
 import { ApiGuard } from '../auth/guards/api.guard';
diff --git a/src/users/users.controller.ts b/src/users/users.controller.ts
@@ -8,7 +8,8 @@ import { UserDto } from './dto/user.dto';
 import { UpdateUserDto } from './dto/user-update.dto';
 import { UserLoginRequestDto } from './dto/user-login-request.dto';
 import { CurrentUser } from '../shared/current-user.decorator';
-import { Role, User } from '@prisma/client';
+import { Role } from '@prisma/client';
+import type { User } from '@prisma/client';
 import { RoleGuard } from '../auth/guards/role.guard';
 import { Roles } from '../shared/roles.decorator';
 import { PrismaService } from '../prisma/prisma.service';
diff --git a/test/jest.config.ts b/test/jest.config.ts
@@ -10,6 +10,9 @@ module.exports = async () => {
     transform: {
       ...createDefaultPreset().transform,
     },
+    transformIgnorePatterns: [
+      'node_modules/(?!(pixelmatch)/)',
+    ],
     coverageDirectory: '../coverage',
     testEnvironment: 'node',
   };
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "NodeNext",
     "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,
@@ -11,7 +11,8 @@
     "baseUrl": "./",
     "incremental": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "isolatedModules": true
   },
   "exclude": ["node_modules", "dist"]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`generator client {`
`2`	`2`	`provider = "prisma-client-js"`
	`3`	`+ output = "../node_modules/.prisma/client"`
`3`	`4`	`binaryTargets = ["native", "debian-openssl-3.0.x", "linux-arm64-openssl-3.0.x"]`
`4`	`5`	`}`
`5`	`6`