Jest测试报错：找不到canvas.node模块问题求助

尽管canvas包已存在于依赖列表中，但执行yarn run test时Jest仍报错无法找到该包，错误信息如下：

packages/first/src/layouts/EventsTable.spec.tsx
  ● Test suite failed to run

    Cannot find module '../build/Release/canvas.node'
    Require stack:
    - /Users/abc/Documents/monorepo/node_modules/canvas/lib/bindings.js
    - /Users/abc/Documents/monorepo/node_modules/canvas/lib/canvas.js
    - /Users/abc/Documents/monorepo/node_modules/canvas/index.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/utils.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/events/MouseEvent-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/MouseEvent.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/aborting/AbortSignal-impl.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/AbortSignal.js
    - /Users/abc/Documents/monorepo/node_modules/jsdom/lib/jsdom/living/generated/AddEventListenerOptions.js
......

通过yarn why canvas确认，canvas@2.11.2是由pdfjs-dist@3.11.174引入的：

yarn why canvas 

└─ pdfjs-dist@npm:3.11.174
   └─ canvas@npm:2.11.2 (via npm:^2.11.2)

已尝试删除node_modules并重新安装，但问题依旧。当前环境：Node v18.16.1，Yarn v3.2.3。

1. 重新编译canvas原生模块 #

canvas是带原生依赖的包，安装时可能因编译失败缺失canvas.node文件，执行以下命令强制重新编译：

yarn rebuild canvas

若使用Yarn v3，也可执行：

yarn dlx @yarnpkg/sdks rebuild canvas

同时确保系统已安装canvas编译依赖：

• macOS：安装Xcode Command Line Tools
• Linux：安装libcairo2-dev、libjpeg-dev、libpango1.0-dev等基础编译库

2. 在Jest中Mock canvas模块 #

如果测试不需要实际调用canvas功能，可直接Mock该模块避免加载原生文件：

1. 在jest.config.js中添加配置：

module.exports = {
  // 其他配置项
  moduleNameMapper: {
    'canvas': '<rootDir>/__mocks__/canvas.js'
  }
};

2. 在项目根目录创建__mocks__/canvas.js，内容如下：

module.exports = {
  createCanvas: () => ({
    getContext: () => ({
      fillRect: jest.fn(),
      clearRect: jest.fn(),
      getImageData: jest.fn(() => ({ data: [] })),
      putImageData: jest.fn(),
      createImageData: jest.fn(() => ({ data: [] })),
      setTransform: jest.fn(),
      drawImage: jest.fn(),
      save: jest.fn(),
      fillText: jest.fn(),
      restore: jest.fn(),
      beginPath: jest.fn(),
      moveTo: jest.fn(),
      lineTo: jest.fn(),
      closePath: jest.fn(),
      stroke: jest.fn(),
      translate: jest.fn(),
      scale: jest.fn(),
      rotate: jest.fn(),
      arc: jest.fn(),
      fill: jest.fn(),
      measureText: jest.fn(() => ({ width: 0 })),
      transform: jest.fn(),
      rect: jest.fn(),
      clip: jest.fn()
    }),
    toDataURL: jest.fn(() => '')
  }),
  registerFont: jest.fn()
};

3. 调整Yarn依赖安装模式 #

Yarn v3的PnP模式可能干扰原生模块加载，尝试切换为传统node_modules模式：
在.yarnrc.yml中添加：

nodeLinker: node-modules

执行yarn install重新安装依赖。

4. 强制指定兼容的canvas版本 #

若pdfjs-dist引入的canvas版本与当前环境不兼容，可在package.json中添加resolutions字段锁定版本：

{
  "resolutions": {
    "canvas": "2.11.2"
  }
}

之后执行yarn install重新安装，确保依赖版本匹配。

内容的提问来源于stack exchange，提问作者mappie