chore: 移除 canvas 依赖，替换为 jest-canvas-mock (#2160)

package.json

@@ -107,7 +107,6 @@
     "autoprefixer": "^10.3.4",
     "axios": "^0.21.0",
     "babel-preset-taro": "3.5.6",
-    "canvas": "^2.9.0",
     "codesandbox": "^2.2.3",
     "eslint": "^7.23.2",
     "eslint-config-taro": "3.5.6",
@@ -119,6 +118,7 @@
     "husky": "^6.0.0",
     "inquirer": "^8.2.0",
     "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.4.0",
     "lint-staged": "^10.5.0",
     "lzutf8": "0.6.0",
     "markdown-it": "^13.0.1",

src/packages/__VUE/signature/__tests__/signature.spec.ts

@@ -3,7 +3,7 @@ import Signature from '../index.vue';
 import NutIcon from '../../icon/index.vue';
 import NutButton from '../../button/index.vue';
 import { nextTick, reactive, toRefs } from 'vue';
-import { createCanvas } from 'canvas';
+import 'jest-canvas-mock';
 
 function sleep(delay = 0): Promise<void> {
   return new Promise((resolve) => {
@@ -42,16 +42,18 @@ test('props custom-class', async () => {
   const signatureWrapper = wrapper.findAll('.nut-signature');
   expect(signatureWrapper[0].classes()).toContain(wrapper.vm.customClass);
 
-  const canvas = createCanvas(200, 200);
+  const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
-  ctx.lineWidth = wrapper.vm.lineWidth;
-  ctx.strokeStyle = wrapper.vm.strokeStyle;
-  ctx.beginPath();
-  ctx.lineTo(10, 50);
-  ctx.lineTo(80, 120);
-  ctx.stroke();
-  const _img = document.createElement('img');
-  _img.src = canvas.toDataURL();
-  expect(canvas.toDataURL()).not.toBeNull();
-  // expect(wrapper.html()).toMatchSnapshot();
+  if (ctx) {
+    ctx.lineWidth = wrapper.vm.lineWidth;
+    ctx.strokeStyle = wrapper.vm.strokeStyle;
+    ctx.beginPath();
+    ctx.lineTo(10, 50);
+    ctx.lineTo(80, 120);
+    ctx.stroke();
+    const _img = document.createElement('img');
+    _img.src = canvas.toDataURL();
+    expect(canvas.toDataURL()).not.toBeNull();
+    // expect(wrapper.html()).toMatchSnapshot();
+  }
 });