Jest测试使用pdfMake的组件报读取pdfMake属性错误如何配置

问题原因 #

这个报错和官方文档提到的Rollup场景触发逻辑完全一致：pdfmake/build/vfs_fonts.js运行时默认将模块上下文的this指向浏览器window对象，会直接读取this.pdfMake挂载字体文件。但Jest加载模块时，模块顶层的this并非jsdom环境提供的window对象，读取属性时拿到undefined就会抛出错误。

解决方案 #

两种方案都不需要修改现有业务代码中的pdfmake导入逻辑，按需选择即可：

• 方案1：Mock pdfmake模块
  适合不需要真实测试PDF生成逻辑、仅验证组件交互的场景，测试执行速度更快。

  1. 若项目根目录没有__mocks__文件夹则新建，在文件夹内创建pdfmake.js文件，写入以下代码：

  const mockPdfMake = jest.createMockFromModule('pdfmake/build/pdfmake');
  const mockPdfFonts = jest.createMockFromModule('pdfmake/build/vfs_fonts');
  mockPdfMake.vfs = mockPdfFonts.pdfMake?.vfs || {};
  export default mockPdfMake;
  

  2. 在Jest配置文件（jest.config.js/jest.config.ts或package.json的jest字段）中添加模块映射规则，保留原有其他配置即可：

  module.exports = {
    moduleNameMapper: {
      '^pdfmake/build/vfs_fonts$': '<rootDir>/__mocks__/pdfmake.js'
    }
  }
  

• 方案2：提前注入全局pdfMake实例
  适合需要真实执行pdfMake生成逻辑的测试，和官方给出的Rollup修复逻辑完全对齐，提前给vfs_fonts准备好可读取的pdfMake对象。

  1. 新建Jest初始化文件，例如命名为jest.pdfmake.setup.js，写入以下全局绑定代码：

  import pdfMake from 'pdfmake/build/pdfmake';
  globalThis.pdfMake = pdfMake;
  window.pdfMake = pdfMake;
  

  2. 在Jest配置中引入该初始化文件，同时确认测试环境为jsdom：

  module.exports = {
    testEnvironment: 'jsdom',
    setupFiles: ['<rootDir>/jest.pdfmake.setup.js']
  }
  

注意：Jest 28之前的版本默认内置jsdom环境，28及以上版本需要单独安装jest-environment-jsdom依赖才能使用浏览器类测试环境。

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