refactor: remove custom typescript settings for tests

2025-09-18 09:50:05 +08:00 · 2025-08-20 11:05:55 +12:00
parent 47abec93a9
commit 42e70ee82e
27 changed files with 188 additions and 234 deletions
--- a/src/types.ts
+++ b/src/types.ts
@@ -49,7 +49,7 @@ export interface IFrame {
  frameRate: number;
 }

-export type AnimationFn = (frame?: IFrame) => boolean | void;
+export type AnimationFn = (frame: IFrame) => boolean | void;

 export enum KonvaNodeEvent {
  mouseover = 'mouseover',
--- a/test/manual/Manual-test.ts
+++ b/test/manual/Manual-test.ts
@@ -352,7 +352,7 @@ describe('Manual', function () {
        document.body.style.cursor = 'default';
      });

-      Konva.pixelRatio = undefined;
+      Konva.pixelRatio = 1;
      done();
    };
    imageObj.src = 'assets/lion.png';
--- a/test/unit/Arc-test.ts
+++ b/test/unit/Arc-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
  assertAlmostDeepEqual,
 } from './test-utils.ts';
@@ -189,8 +189,7 @@ describe('Arc', function () {
    layer.add(arc);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.arc(100, 100, 80, 0, Math.PI / 2, false);
    context.arc(100, 100, 50, Math.PI / 2, 0, true);
--- a/test/unit/Blob-test.ts
+++ b/test/unit/Blob-test.ts
@@ -57,7 +57,7 @@ describe('Blob', function () {
    layer.add(blob);
    stage.add(layer);

-    assert.equal(stage.findOne<Line>('Line').points().length, 8);
+    assert.equal(stage.findOne<Line>('Line')?.points().length, 8);
  });

  // ======================================================
--- a/test/unit/Circle-test.ts
+++ b/test/unit/Circle-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
  loadImage,
 } from './test-utils.ts';
@@ -159,8 +159,7 @@ describe('Circle', function () {
    layer.add(group);
    stage.add(layer);

-    var canvas = createCanvas();
-    var ctx = canvas.getContext('2d');
+    const { canvas, context: ctx } = createCanvasAndContext();

    var start = { x: -35, y: -35 };
    var end = { x: 35, y: 35 };
@@ -306,8 +305,7 @@ describe('Circle', function () {
    layer.add(circle);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, false);
    context.closePath();
--- a/test/unit/DragAndDropEvents-test.ts
+++ b/test/unit/DragAndDropEvents-test.ts
@@ -47,7 +47,7 @@ describe('DragAndDropEvents', function () {
    var dragStart = false;
    var dragMove = false;
    var dragEnd = false;
-    var events = [];
+    var events: string[] = [];

    circle.on('dragstart', function () {
      dragStart = true;
--- a/test/unit/Ellipse-test.ts
+++ b/test/unit/Ellipse-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
 } from './test-utils.ts';

@@ -99,8 +99,7 @@ describe('Ellipse', function () {
    layer.add(ellipse);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.save();
    context.beginPath();
    context.scale(1, 0.5);
--- a/test/unit/Group-test.ts
+++ b/test/unit/Group-test.ts
@@ -38,7 +38,7 @@ describe('Group', function () {
        y: -15,
        width: 150,
        height: 150,
-      })
+      })!
      .offsetX(5)
      .offsetY(5);

--- a/test/unit/Image-test.ts
+++ b/test/unit/Image-test.ts
@@ -3,11 +3,11 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
  compareLayerAndCanvas,
  loadImage,
  isNode,
  isBrowser,
+  createCanvasAndContext,
 } from './test-utils.ts';

 describe('Image', function () {
@@ -305,8 +305,7 @@ describe('Image', function () {
        height: 100,
      });

-      var canvas = createCanvas();
-      var context = canvas.getContext('2d');
+      const { canvas, context } = createCanvasAndContext();
      context.drawImage(imageObj, 200, 60, 100, 100);
      compareLayerAndCanvas(layer, canvas, 10);
      done();
@@ -341,9 +340,13 @@ describe('Image', function () {
    var layer = new Konva.Layer();
    stage.add(layer);
    var src = 'non-existent.jpg';
-    Konva.Image.fromURL(src, null, function (e) {
-      done();
-    });
+    Konva.Image.fromURL(
+      src,
+      () => {},
+      function (e) {
+        done();
+      }
+    );
  });

  it('check zero values', function (done) {
--- a/test/unit/Layer-test.ts
+++ b/test/unit/Layer-test.ts
@@ -225,12 +225,12 @@ describe('Layer', function () {
    stage.add(layer);

    assert.equal(
-      layer.getIntersection({ x: 300, y: 100 }).id(),
+      layer.getIntersection({ x: 300, y: 100 })?.id(),
      'greenCircle',
      'shape should be greenCircle'
    );
    assert.equal(
-      layer.getIntersection({ x: 380, y: 100 }).id(),
+      layer.getIntersection({ x: 380, y: 100 })?.id(),
      'redCircle',
      'shape should be redCircle'
    );
--- a/test/unit/Line-test.ts
+++ b/test/unit/Line-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
  compareLayers,
 } from './test-utils.ts';
@@ -147,8 +147,7 @@ describe('Line', function () {
    layer.add(line);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    context.save();
    context.lineJoin = 'round';
--- a/test/unit/MouseEvents-test.ts
+++ b/test/unit/MouseEvents-test.ts
@@ -1550,7 +1550,7 @@ describe('MouseEvents', function () {
    stage.add(layer);

    // events array
-    var e = [];
+    var e: string[] = [];

    circle.on('click', function () {
      e.push('circle');
--- a/test/unit/Node-cache-test.ts
+++ b/test/unit/Node-cache-test.ts
@@ -5,7 +5,7 @@ import {
  compareLayerAndCanvas,
  cloneAndCompareLayer,
  compareCanvases,
-  createCanvas,
+  createCanvasAndContext,
  loadImage,
  getPixelRatio,
 } from './test-utils.ts';
@@ -29,8 +29,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -60,8 +59,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.translate(100, 50);
    context.rotate(Math.PI / 4);
    context.beginPath();
@@ -93,8 +91,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -125,8 +122,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.3;
    context.beginPath();
    context.rect(100, 50, 100, 50);
@@ -209,8 +205,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -244,8 +239,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    context.translate(100, 50);
    context.beginPath();
@@ -281,8 +275,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    context.translate(100, 50);
    context.beginPath();
@@ -346,8 +339,7 @@ describe('Caching', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    context.translate(50, 25);
    context.beginPath();
@@ -384,8 +376,7 @@ describe('Caching', function () {
    layer.add(group);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -461,8 +452,7 @@ describe('Caching', function () {
    layer.add(group);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    // draw rect
    context.save();
@@ -574,8 +564,7 @@ describe('Caching', function () {
    layer.add(group);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    // draw rect
    context.save();
@@ -630,8 +619,7 @@ describe('Caching', function () {

    assert.equal(circle._getCanvasCache(), undefined);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    // circle
    context.save();
    context.beginPath();
@@ -858,8 +846,7 @@ describe('Caching', function () {
    group.cache();
    layer.draw();

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    context.beginPath();
    context.rect(100, 50, 100, 50);
@@ -891,8 +878,7 @@ describe('Caching', function () {
    layer.visible(true);
    layer.draw();

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 100);
    context.closePath();
@@ -960,8 +946,7 @@ describe('Caching', function () {
    layer.listening(true);
    layer.draw();

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 100);
    context.closePath();
@@ -999,8 +984,7 @@ describe('Caching', function () {
    layer.visible(true);
    layer.draw();

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    context.beginPath();
    context.rect(100, 50, 100, 100);
@@ -1535,8 +1519,7 @@ describe('Caching', function () {
    assert.equal(hitCanvas._canvas.height, rect.height() * 0.2);
    assert.equal(hitCanvas.pixelRatio, 0.2);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 100);
    context.closePath();
--- a/test/unit/Node-test.ts
+++ b/test/unit/Node-test.ts
@@ -637,7 +637,7 @@ describe('Node', function () {
      id: 'myRect',
    });

-    var clicks = [];
+    var clicks: string[] = [];

    rect.on('click', function () {
      clicks.push(this.name());
@@ -719,8 +719,8 @@ describe('Node', function () {
    group.add(rect);
    group.add(text);

-    var clicks = [];
-    var taps = [];
+    var clicks: string[] = [];
+    var taps: string[] = [];

    group.on('click', function () {
      clicks.push(this.name());
@@ -1883,7 +1883,7 @@ describe('Node', function () {
    layer.add(circle);
    layer.draw();

-    var clicks = [];
+    var clicks: string[] = [];

    circle.on('click', function () {
      clicks.push('circle');
@@ -2057,7 +2057,7 @@ describe('Node', function () {
    layer.add(circle);
    layer.draw();

-    var clicks = [];
+    var clicks: string[] = [];

    circle.on('click', function () {
      clicks.push('circle');
@@ -2091,7 +2091,7 @@ describe('Node', function () {
    layer.add(circle);
    layer.draw();

-    var clicks = [];
+    var clicks: string[] = [];

    circle.on('click', function (e) {
      e.cancelBubble = true;
@@ -3318,7 +3318,7 @@ describe('Node', function () {
        width: 148,
        height: 148,
      })
-      .offset({
+      ?.offset({
        x: 74,
        y: 74,
      });
@@ -3834,7 +3834,7 @@ describe('Node', function () {
      y: 100,
    });

-    assert.equal(circle.getRelativePointerPosition().x, -50);
-    assert.equal(circle.getRelativePointerPosition().y, 0);
+    assert.equal(circle.getRelativePointerPosition()?.x, -50);
+    assert.equal(circle.getRelativePointerPosition()?.y, 0);
  });
 });
--- a/test/unit/Path-test.ts
+++ b/test/unit/Path-test.ts
@@ -6,7 +6,7 @@ import tiger from '../assets/tiger.ts';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
  cloneAndCompareLayer,
  isNode,
@@ -196,8 +196,7 @@ describe('Path', function () {

    assert.equal(path.dataArray[1].command, 'L');

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    // stroke
    context.beginPath();
    context.moveTo(200, 100);
@@ -1099,7 +1098,7 @@ describe('Path', function () {
      ) as SVGPathElement;
      SVGPath.setAttribute('d', data);
      for (var i = 0; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        var circle = new Konva.Circle({
          x: p.x,
          y: p.y,
@@ -1119,9 +1118,9 @@ describe('Path', function () {
        );
      }
    } else {
-      var points = [];
+      var points: { x: number; y: number }[] = [];
      for (var i = 0; i < path.getLength(); i += 20) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        points.push(p);
        var circle = new Konva.Circle({
          x: p.x,
@@ -1185,7 +1184,7 @@ describe('Path', function () {
      ) as SVGPathElement;
      SVGPath.setAttribute('d', data);
      for (var i = 0.001; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        var circle = new Konva.Circle({
          x: p.x + path.x(),
          y: p.y + path.y(),
@@ -1222,7 +1221,7 @@ describe('Path', function () {
      ) as SVGPathElement;
      SVGPath.setAttribute('d', data);
      for (var i = 0; i < path.getLength(); i += 1) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        var circle = new Konva.Circle({
          x: p.x,
          y: p.y,
@@ -1262,7 +1261,7 @@ describe('Path', function () {
      ) as SVGPathElement;
      SVGPath.setAttribute('d', data);
      for (var i = 0; i < path.getLength(); i += 10) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        var circle = new Konva.Circle({
          x: p.x,
          y: p.y,
@@ -1282,9 +1281,9 @@ describe('Path', function () {
        );
      }
    } else {
-      var points = [];
+      var points: { x: number; y: number }[] = [];
      for (var i = 0; i < path.getLength(); i += 500) {
-        var p = path.getPointAtLength(i);
+        var p = path.getPointAtLength(i)!;
        points.push(p);
        var circle = new Konva.Circle({
          x: p.x,
--- a/test/unit/PointerEvents-test.ts
+++ b/test/unit/PointerEvents-test.ts
@@ -163,7 +163,6 @@ describe.skip('PointerEvents', function () {
      x: 289,
      y: 10,
      pointerId: 0,
-      preventDefault: function () {},
    });

    assert.equal(otherDownCount, 1, '6) otherDownCount should be 1');
@@ -176,7 +175,6 @@ describe.skip('PointerEvents', function () {
      x: 289,
      y: 100,
      pointerId: 1,
-      preventDefault: function () {},
    });

    assert.equal(otherDownCount, 1, '7) otherDownCount should be 1');
@@ -189,7 +187,6 @@ describe.skip('PointerEvents', function () {
      x: 289,
      y: 10,
      pointerId: 2,
-      preventDefault: function () {},
    });

    assert.equal(otherDownCount, 1, '8) otherDownCount should be 1');
@@ -209,15 +206,15 @@ describe.skip('PointerEvents', function () {
      assert(pointermove, '9) pointermove should be true');

      simulatePointerUp(stage, {
+        x: 290,
+        y: 10,
        pointerId: 1,
-        preventDefault: function () {},
      });

      simulatePointerDown(stage, {
        x: 289,
        y: 10,
        pointerId: 1,
-        preventDefault: function () {},
      });

      assert(otherDownCount === 2, '10) otherDownCount should be 1');
--- a/test/unit/Rect-test.ts
+++ b/test/unit/Rect-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
 } from './test-utils.ts';

@@ -120,8 +120,7 @@ describe('Rect', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(200, 100, 100, 50);
    context.fillStyle = 'blue';
@@ -149,8 +148,7 @@ describe('Rect', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(200, 100, 100, 50);
    context.lineWidth = 4;
@@ -175,8 +173,7 @@ describe('Rect', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(200, 100, 100, 50);
    context.lineWidth = 2;
@@ -202,8 +199,7 @@ describe('Rect', function () {
    stage.add(layer);

    // as corner radius is much bigger we should have circe in the result
-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2);
    context.fillStyle = 'black';
--- a/test/unit/RegularPolygon-test.ts
+++ b/test/unit/RegularPolygon-test.ts
@@ -5,7 +5,7 @@ import {
  Konva,
  cloneAndCompareLayer,
  assertAlmostEqual,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
 } from './test-utils.ts';

@@ -230,8 +230,7 @@ describe('RegularPolygon', function () {
    stage.add(layer);

    // corner radius creates perfect circle at 1/2 radius
-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.arc(100, 100, resultCircleRadius, 0, Math.PI * 2);
    context.fillStyle = 'black';
--- a/test/unit/Shape-test.ts
+++ b/test/unit/Shape-test.ts
@@ -5,7 +5,7 @@ import {
  simulateMouseDown,
  simulateMouseMove,
  simulateMouseUp,
-  createCanvas,
+  createCanvasAndContext,
  isBrowser,
  isNode,
  compareLayerAndCanvas,
@@ -500,8 +500,7 @@ describe('Shape', function () {
    assert.equal(rect.x(), 100);
    assert.equal(rect.y(), 50);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    // rect
    context.beginPath();
@@ -572,8 +571,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -617,8 +615,7 @@ describe('Shape', function () {
    assert.equal(rect.x(), 100);
    assert.equal(rect.y(), 50);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    // rect
    context.beginPath();
@@ -665,8 +662,7 @@ describe('Shape', function () {

    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    // stroke
    context.beginPath();
@@ -711,8 +707,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -722,8 +717,7 @@ describe('Shape', function () {
    context.fill();
    context.stroke();

-    var c2 = createCanvas();
-    var ctx2 = c2.getContext('2d');
+    const { canvas: c2, context: ctx2 } = createCanvasAndContext();
    ctx2.shadowColor = 'grey';
    ctx2.shadowBlur = 10 * Konva.pixelRatio;
    ctx2.shadowOffsetX = 20 * Konva.pixelRatio;
@@ -774,8 +768,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.3;

    // draw shadow
@@ -854,8 +847,7 @@ describe('Shape', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    context.save();
    context.shadowColor = 'black';
@@ -1257,8 +1249,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    // rect
    context.beginPath();
    context.rect(100, 100, 50, 50);
@@ -1303,8 +1294,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    // rect
    context.beginPath();
    context.rect(50, 100, 50, 50);
@@ -1352,8 +1342,7 @@ describe('Shape', function () {
    layer.add(group);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    // rect
    context.beginPath();
    context.rect(100, 100, 50, 50);
@@ -1397,8 +1386,7 @@ describe('Shape', function () {

    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.globalAlpha = 0.5;
    // stroke
    context.beginPath();
@@ -1441,8 +1429,7 @@ describe('Shape', function () {

    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    // stroke
    context.beginPath();
@@ -1455,8 +1442,7 @@ describe('Shape', function () {
    context.fill();
    context.stroke();

-    var canvas2 = createCanvas();
-    var context2 = canvas2.getContext('2d');
+    const { canvas: canvas2, context: context2 } = createCanvasAndContext();
    context2.globalAlpha = 0.5;
    context2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);

@@ -1652,8 +1638,7 @@ describe('Shape', function () {
    layer.add(rect);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.beginPath();
    context.rect(100, 50, 100, 50);
    context.closePath();
@@ -1980,9 +1965,9 @@ describe('Shape', function () {
      var oldCreate = ctx.createPattern;

      var callCount = 0;
-      ctx.createPattern = function () {
+      ctx.createPattern = function (...args) {
        callCount += 1;
-        return oldCreate.apply(this, arguments);
+        return oldCreate.apply(this, args);
      };

      layer.draw();
@@ -2078,9 +2063,9 @@ describe('Shape', function () {
    var oldCreate = ctx.createLinearGradient;

    var callCount = 0;
-    ctx.createLinearGradient = function () {
+    ctx.createLinearGradient = function (...args) {
      callCount += 1;
-      return oldCreate.apply(this, arguments);
+      return oldCreate.apply(this, args);
    };

    layer.draw();
@@ -2176,9 +2161,9 @@ describe('Shape', function () {
    var oldCreate = ctx.createRadialGradient;

    var callCount = 0;
-    ctx.createRadialGradient = function () {
+    ctx.createRadialGradient = function (...args) {
      callCount += 1;
-      return oldCreate.apply(this, arguments);
+      return oldCreate.apply(this, args);
    };

    layer.draw();
@@ -2349,8 +2334,7 @@ describe('Shape', function () {
    var layer = new Konva.Layer();
    stage.add(layer);

-    var canvas = createCanvas();
-    var ctx = canvas.getContext('2d');
+    const { canvas, context: ctx } = createCanvasAndContext();

    var gradient = ctx.createLinearGradient(0, 75, 100, 75);
    gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
@@ -2440,8 +2424,7 @@ describe('Shape', function () {
    stage.add(layer);

    // Create expected result using native canvas with buffer approach
-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();

    // Draw on buffer first
    context.beginPath();
@@ -2459,8 +2442,8 @@ describe('Shape', function () {
    context.stroke();

    // Apply opacity by drawing to final canvas
-    var finalCanvas = createCanvas();
-    var finalContext = finalCanvas.getContext('2d');
+    const { canvas: finalCanvas, context: finalContext } =
+      createCanvasAndContext();
    finalContext.globalAlpha = 0.7;
    finalContext.drawImage(canvas, 0, 0);

--- a/test/unit/Stage-test.ts
+++ b/test/unit/Stage-test.ts
@@ -10,12 +10,12 @@ import {
  simulateTouchEnd,
  simulatePointerMove,
  compareCanvases,
-  createCanvas,
  showHit,
  getContainer,
  isNode,
  isBrowser,
  Konva,
+  createCanvasAndContext,
 } from './test-utils.ts';

 describe('Stage', function () {
@@ -210,7 +210,7 @@ describe('Stage', function () {
    }
    var stage = addStage();
    var container = document.createElement('div');
-    var wrap = stage.container().parentNode;
+    var wrap = stage.container().parentNode!;
    wrap.appendChild(container);

    stage.container(container);
@@ -240,7 +240,7 @@ describe('Stage', function () {
    layer.draw();

    var container = document.createElement('div');
-    var wrap = stage.container().parentNode;
+    var wrap = stage.container().parentNode!;
    wrap.appendChild(container);

    var clone = stage.clone();
@@ -257,7 +257,7 @@ describe('Stage', function () {
    }
    var stage = addStage();
    var container = stage.container();
-    var parent = stage.content.parentElement;
+    var parent = stage.content.parentElement!;

    parent.removeChild(stage.content);

@@ -334,7 +334,7 @@ describe('Stage', function () {
    });

    stage.on('contentMousemove', function () {
-      var pos = stage.getPointerPosition();
+      var pos = stage.getPointerPosition()!;
      var shape = stage.getIntersection(pos);
      if (!shape) {
        //console.log(pos);
@@ -1367,10 +1367,9 @@ describe('Stage', function () {
      height: stage.height() + 20,
    });

-    var canvas = createCanvas();
+    const { canvas, context } = createCanvasAndContext();
    canvas.width = radius * 2;
    canvas.height = radius * 2;
-    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(radius, radius, radius, 0, 2 * Math.PI);
    context.fillStyle = 'black';
--- a/test/unit/Text-test.ts
+++ b/test/unit/Text-test.ts
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import {
  addStage,
  Konva,
-  createCanvas,
+  createCanvasAndContext,
  compareLayerAndCanvas,
  compareLayers,
  loadImage,
@@ -18,7 +18,7 @@ export function getOffsetY(
 ) {
  const metrics = context.measureText('M') as any;
  fontSize =
-    fontSize || parseInt(context.font.split('px')[0].split(' ').pop(), 10);
+    fontSize || parseInt(context.font.split('px')[0].split(' ').pop()!, 10);
  lineHeight = lineHeight || 1;

  // Use the same fallbacks as Text.measureSize() for missing advanced metrics
@@ -166,8 +166,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.textBaseline = 'alphabetic';
    context.font = 'normal normal 50px Arial';
    context.fillStyle = 'darkgrey';
@@ -193,8 +192,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.textBaseline = 'alphabetic';
    context.font = 'normal normal 50px Arial';

@@ -224,8 +222,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.textBaseline = 'alphabetic';
    context.font = 'normal normal 20px Arial';
    context.fillStyle = 'black';
@@ -254,8 +251,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.textBaseline = 'middle';
    context.letterSpacing = '10px';
    context.font = 'normal normal 50px Arial';
@@ -1010,8 +1006,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.translate(0, 80);
    context.lineWidth = 2;
    context.font = '80px Arial';
@@ -1395,8 +1390,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var context = canvas.getContext('2d');
+    const { canvas, context } = createCanvasAndContext();
    context.translate(50, 50);
    context.lineWidth = 2;
    context.font = '50px Arial';
@@ -1450,8 +1444,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var ctx = canvas.getContext('2d');
+    const { canvas, context: ctx } = createCanvasAndContext();

    ctx.fillStyle = 'green';
    ctx.font = 'normal 50px Arial';
@@ -1490,8 +1483,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var ctx = canvas.getContext('2d');
+    const { canvas, context: ctx } = createCanvasAndContext();

    ctx.fillStyle = 'green';
    ctx.font = 'normal 50px Arial';
@@ -1541,8 +1533,7 @@ describe('Text', function () {
    layer.add(text);
    stage.add(layer);

-    var canvas = createCanvas();
-    var ctx = canvas.getContext('2d');
+    const { canvas, context: ctx } = createCanvasAndContext();

    ctx.fillStyle = 'green';
    ctx.font = 'normal 50px Arial';
@@ -1669,14 +1660,13 @@ describe('Text', function () {
      layer.add(text);
      stage.add(layer);

-      var canvas = createCanvas();
-      var ctx = canvas.getContext('2d');
+      const { canvas, context: ctx } = createCanvasAndContext();

      ctx.fillStyle = 'green';
      ctx.font = 'normal normal 30px Arial';
      ctx.textBaseline = 'alphabetic';

-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
      ctx.fillStyle = grd;

      ctx.fillText(text.text(), 0, getOffsetY(ctx));
@@ -1704,14 +1694,13 @@ describe('Text', function () {
      layer.add(text);
      stage.add(layer);

-      var canvas = createCanvas();
-      var ctx = canvas.getContext('2d');
+      const { canvas, context: ctx } = createCanvasAndContext();

      ctx.fillStyle = 'green';
      ctx.font = 'normal normal 30px Arial';
      ctx.textBaseline = 'alphabetic';

-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
      const matrix = new (global as any).DOMMatrix([1, 0, 0, 1, -50, 0]);
      grd.setTransform(matrix);

@@ -1742,14 +1731,13 @@ describe('Text', function () {
      layer.add(text);
      stage.add(layer);

-      var canvas = createCanvas();
-      var ctx = canvas.getContext('2d');
+      const { canvas, context: ctx } = createCanvasAndContext();

      ctx.fillStyle = 'green';
      ctx.font = 'normal normal 30px Arial';
      ctx.textBaseline = 'alphabetic';

-      var grd = ctx.createPattern(imageObj, 'repeat');
+      var grd = ctx.createPattern(imageObj, 'repeat')!;
      const matrix = new (global as any).DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);

      grd.setTransform(matrix);
--- a/test/unit/TouchEvents-test.ts
+++ b/test/unit/TouchEvents-test.ts
@@ -826,8 +826,8 @@ describe('TouchEvents', function () {

    stage.on('tap', function (e) {
      assert.equal(e.target, circle1);
-      assert.equal(stage.getPointerPosition().x, 100);
-      assert.equal(stage.getPointerPosition().y, 100);
+      assert.equal(stage.getPointerPosition()?.x, 100);
+      assert.equal(stage.getPointerPosition()?.y, 100);
      tap += 1;
    });

--- a/test/unit/Transformer-test.ts
+++ b/test/unit/Transformer-test.ts
@@ -1,6 +1,7 @@
 import { assert } from 'chai';
 import { Transformer } from '../../src/shapes/Transformer.ts';
 import type { Rect } from '../../src/shapes/Rect.ts';
+import type { Shape } from '../../src/Shape.ts';

 import {
  addStage,
@@ -12,13 +13,25 @@ import {
  assertAlmostEqual,
 } from './test-utils.ts';

-function simulateMouseDown(tr, pos) {
-  sd(tr.getStage(), pos);
+function simulateMouseDown(
+  tr: Transformer,
+  pos: { x: number; y: number; button?: number }
+) {
+  sd(tr.getStage()!, pos);
 }

-function simulateMouseMove(tr, pos) {
-  const stage = tr.getStage();
-  var top = (stage.content && stage.content.getBoundingClientRect().top) || 0;
+function simulateMouseMove(
+  tr: Transformer,
+  pos: {
+    target?: Shape | null;
+    x: number;
+    y: number;
+    button?: number;
+    altKey?: boolean;
+  }
+) {
+  const stage = tr.getStage()!;
+  const top = stage?.content?.getBoundingClientRect().top ?? 0;
  tr._handleMouseMove({
    ...pos,
    clientX: pos.x,
@@ -28,13 +41,13 @@ function simulateMouseMove(tr, pos) {
 }

 function simulateMouseUp(tr: Transformer, pos = { x: 0, y: 0 }) {
-  const stage = tr.getStage();
-  var top = (stage.content && stage.content.getBoundingClientRect().top) || 0;
+  const stage = tr.getStage()!;
+  const top = stage.content?.getBoundingClientRect().top ?? 0;
  tr._handleMouseUp({
    clientX: pos.x,
    clientY: pos.y + top,
  });
-  su(tr.getStage(), pos || { x: 1, y: 1 });
+  su(stage, pos || { x: 1, y: 1 });
 }

 describe('Transformer', function () {
@@ -68,7 +81,7 @@ describe('Transformer', function () {
    assert.equal(tr.height(), rect.height());

    // manual check of correct position of node
-    var handler = tr.findOne('.bottom-right');
+    var handler = tr.findOne('.bottom-right')!;
    var pos = handler.getAbsolutePosition();
    assert.equal(pos.x, rect.x() + rect.width());
    assert.equal(pos.y, rect.y() + rect.height());
@@ -431,7 +444,7 @@ describe('Transformer', function () {
    assert.equal(tr.x(), 100, 'second x');
    assert.equal(tr.width(), 200);
    // check visual
-    var pos = tr.findOne('.top-right').getAbsolutePosition();
+    var pos = tr.findOne('.top-right')!.getAbsolutePosition();
    assert.equal(pos.x, 300);

    stage.draw();
@@ -693,7 +706,7 @@ describe('Transformer', function () {
    assert.equal(tr.y(), rect.y());
    assert.equal(tr.width(), rect.width());
    assert.equal(tr.height(), rect.height());
-    assert.equal(tr.findOne('.back').width(), rect.width());
+    assert.equal(tr.findOne('.back')?.width(), rect.width());
  });

  it('add transformer for transformed rect', function () {
@@ -1391,7 +1404,7 @@ describe('Transformer', function () {
    layer.add(tr);
    layer.draw();

-    var anchor = tr.findOne('.top-right');
+    var anchor = tr.findOne('.top-right')!;
    var pos = anchor.getAbsolutePosition();

    simulateMouseDown(tr, {
@@ -1434,7 +1447,7 @@ describe('Transformer', function () {

    layer.draw();

-    var anchor = tr.findOne('.top-left');
+    var anchor = tr.findOne('.top-left')!;
    assertAlmostEqual(anchor.getAbsolutePosition().x, 20);

    simulateMouseDown(tr, {
@@ -2025,7 +2038,7 @@ describe('Transformer', function () {
    assert.equal(tr.height(), 100);

    // manual check position
-    var back = tr.findOne('.back');
+    var back = tr.findOne('.back')!;
    assert.equal(back.getAbsolutePosition().x, 0);

    layer.batchDraw();
@@ -2188,7 +2201,7 @@ describe('Transformer', function () {
    layer.add(tr);
    layer.draw();

-    var rotater = tr.findOne('.rotater');
+    var rotater = tr.findOne('.rotater')!;
    var pos = rotater.getAbsolutePosition();

    simulateMouseDown(tr, {
@@ -2724,7 +2737,7 @@ describe('Transformer', function () {
      x: 20,
      y: 20,
    });
-    assert.equal(shape.name(), 'top-left _anchor');
+    assert.equal(shape?.name(), 'top-left _anchor');
  });

  it('check rotator size on scaled transformer', function () {
@@ -2751,7 +2764,7 @@ describe('Transformer', function () {
    layer.add(tr);
    layer.draw();

-    var rotater = tr.findOne('.rotater');
+    var rotater = tr.findOne('.rotater')!;
    var pos = rotater.getAbsolutePosition();

    // pos.x === (x * scaleX - (height))
@@ -4874,7 +4887,7 @@ describe('Transformer', function () {
    });
    layer.add(tr);
    // manual check of correct position of node
-    var handler = tr.findOne<Rect>('.bottom-right');
+    var handler = tr.findOne<Rect>('.bottom-right')!;
    assert.equal(handler.fill(), 'white');

    tr.anchorStyleFunc((anchor) => {
--- a/test/unit/Tween-test.ts
+++ b/test/unit/Tween-test.ts
@@ -153,7 +153,7 @@ describe('Tween', function () {
    stage.add(layer);

    var duration = 0.1;
-    var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)');
+    var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)')!;
    var endFill = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
    var midFill = 'rgba(128,128,0,0.75)';

--- a/test/unit/imagediff.ts
+++ b/test/unit/imagediff.ts
@@ -125,7 +125,7 @@ function toImageDataFromContext(context) {
 function toCanvas(object) {
  const data = toImageData(object),
    canvas = getCanvas(data.width, data.height),
-    context = canvas.getContext('2d');
+    context = canvas.getContext('2d')!;

  context.putImageData(data, 0, 0);
  return canvas;
--- a/test/unit/test-utils.ts
+++ b/test/unit/test-utils.ts
@@ -21,8 +21,8 @@ beforeEach(function () {

 // clear after test
 afterEach(function () {
-  var isFailed = this.currentTest.state == 'failed';
-  var isManual = this.currentTest.parent.title === 'Manual';
+  var isFailed = this.currentTest?.state === 'failed';
+  var isManual = this.currentTest?.parent?.title === 'Manual';

  Konva.stages.forEach(function (stage) {
    clearTimeout(stage._mouseDblTimeout);
@@ -44,7 +44,7 @@ export const isNode = typeof global.document === 'undefined';
 export const isBrowser = !isNode;

 export function getContainer() {
-  return document.getElementById('konva-container');
+  return document.getElementById('konva-container')!;
 }

 export function addContainer() {
@@ -69,7 +69,7 @@ export function addStage(attrs?) {
  });

  if (!isNode) {
-    getContainer().appendChild(container);
+    getContainer().appendChild(container!);
  }

  return stage;
@@ -111,9 +111,7 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) {
  var equal = imagediff.equal(canvas1, canvas2, tol, secondTol);
  if (!equal) {
    const diff = imagediff.diff(canvas1, canvas2);
-    const diffCanvas = createCanvas();
-
-    const context = diffCanvas.getContext('2d');
+    const { canvas: diffCanvas, context } = createCanvasAndContext();
    context.putImageData(diff, 0, 0);

    var base64 = diffCanvas.toDataURL();
@@ -171,12 +169,13 @@ export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) {
  );
 }

-export function createCanvas() {
-  var node = Konva.Util.createCanvasElement();
-  node.width = 578 * Konva.pixelRatio;
-  node.height = 200 * Konva.pixelRatio;
-  node.getContext('2d').scale(Konva.pixelRatio, Konva.pixelRatio);
-  return node;
+export function createCanvasAndContext() {
+  const canvas = Konva.Util.createCanvasElement();
+  canvas.width = 578 * Konva.pixelRatio;
+  canvas.height = 200 * Konva.pixelRatio;
+  const context = canvas.getContext('2d')!;
+  context.scale(Konva.pixelRatio, Konva.pixelRatio);
+  return { canvas, context };
 }

 export function showHit(layer) {
@@ -189,7 +188,10 @@ export function showHit(layer) {
  getContainer().appendChild(canvas);
 }

-export function simulateMouseDown(stage, pos) {
+export function simulateMouseDown(
+  stage: Stage,
+  pos: { x: number; y: number; button?: number }
+) {
  simulatePointerDown(stage, pos);
  var top = isNode ? 0 : stage.content.getBoundingClientRect().top;

@@ -198,10 +200,13 @@ export function simulateMouseDown(stage, pos) {
    clientY: pos.y + top,
    button: pos.button || 0,
    type: 'mousedown',
-  });
+  } as any);
 }

-export function simulateMouseMove(stage, pos) {
+export function simulateMouseMove(
+  stage: Stage,
+  pos: { x: number; y: number; button?: number }
+) {
  simulatePointerMove(stage, pos);
  var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
  var evt = {
@@ -212,7 +217,7 @@ export function simulateMouseMove(stage, pos) {
  };

  Konva.DD._drag(evt);
-  stage._pointermove(evt);
+  stage._pointermove(evt as any);
 }

 export function simulateMouseUp(stage, pos) {
@@ -344,7 +349,13 @@ export function simulateTouchEnd(stage, pos, changed?) {
  Konva.DD._endDragAfter(evt);
 }

-export function simulatePointerDown(stage: Stage, pos) {
+type SimulatedPointerEvent = {
+  x: number;
+  y: number;
+  button?: number;
+  pointerId?: number;
+};
+export function simulatePointerDown(stage: Stage, pos: SimulatedPointerEvent) {
  var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
  stage._pointerdown({
    clientX: pos.x,
@@ -355,7 +366,7 @@ export function simulatePointerDown(stage: Stage, pos) {
  } as any);
 }

-export function simulatePointerMove(stage: Stage, pos) {
+export function simulatePointerMove(stage: Stage, pos: SimulatedPointerEvent) {
  var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
  var evt = {
    clientX: pos.x,
@@ -369,7 +380,7 @@ export function simulatePointerMove(stage: Stage, pos) {
  // Konva.DD._drag(evt);
 }

-export function simulatePointerUp(stage: Stage, pos) {
+export function simulatePointerUp(stage: Stage, pos: SimulatedPointerEvent) {
  var top = isNode ? 0 : stage.content.getBoundingClientRect().top;
  var evt = {
    clientX: pos.x,
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -1,19 +1,7 @@
 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "strict": false,
-    "noImplicitAny": false,
-    "allowJs": true,
-    "noEmit": true,
-    "checkJs": false,
-    "allowUnreachableCode": true,
-    "allowUnusedLabels": true,
-    "noFallthroughCasesInSwitch": false,
-    "noImplicitReturns": false,
-    "noImplicitThis": false,
-    "noPropertyAccessFromIndexSignature": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false
+    "noEmit": true
  },
  "include": ["src", "test"]
 }