Vue3+Jest28集成vue-pdf-embed报错：Inline worker is not supported

问题背景 #

在Vue 3 + Jest 28环境中集成vue-pdf-embed组件，组件在浏览器中运行正常，但执行Jest测试时抛出错误：

Inline worker is not supported

已尝试将vue-pdf-embed加入jest.config.ts的esModules列表，但问题未解决。当前jest.config.ts配置如下：

const esModules = ['quasar', 'quasar/lang', 'lodash-es', 'cnpj'].join('|');

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    url: 'http://localhost/',
    customExportConditions: ['node', 'node-addons'],
  },
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tests/tsconfig.json',
      isolatedModules: true,
    },
  },
  collectCoverageFrom: ['src/**/*.{vue,js,ts}', '!src/*.{js,ts}', '!**/typings/**', '!src/**/definitions/*.ts'],
  coverageProvider: 'v8',
  setupFiles: [
    '<rootDir>/tests/jest.init.ts',
  ],
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.ts'],
  moduleFileExtensions: [
    'vue',
    'js',
    'ts',
    'json',
    'jsx',
    'tsx',
  ],

  transform: {
    [`^(${esModules}).+\.js$`]: 'babel-jest',
    '^.+\.(ts|js|html)$': 'ts-jest',
    '.*\.vue$': '@vue/vue3-jest',
    '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
  },

  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],

  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
    '^quasar$': 'quasar/dist/quasar.esm.prod.js',
    'lodash-es': 'lodash',
  },

  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
};

原因分析 #

vue-pdf-embed依赖pdfjs-dist处理PDF渲染，而pdfjs-dist在浏览器环境会用Web Worker解析PDF，但Jest的jsdom环境不支持内联Worker，这就是测试报错的核心原因。仅把vue-pdf-embed加入esModules，无法解决底层pdfjs的Worker兼容问题。

解决方案 #

方案1：Mock pdfjs-dist的Worker实现（推荐） #

在Jest的初始化文件（比如setupTests.ts）中添加代码，手动mock掉pdfjs的Worker逻辑，让测试用同步模式运行：

import * as pdfjsLib from 'pdfjs-dist';
import { GlobalWorkerOptions } from 'pdfjs-dist';

// 禁用Worker，改用同步解析
GlobalWorkerOptions.workerSrc = '';

// mock getDocument方法，返回模拟的PDF文档对象
pdfjsLib.getDocument = jest.fn(() => ({
  promise: Promise.resolve({
    numPages: 1,
    getPage: () => Promise.resolve({
      getViewport: () => ({ width: 500, height: 700 }),
      render: () => ({ promise: Promise.resolve() }),
    }),
  }),
}));

方案2：配置Jest处理pdfjs的Worker文件 #

修改jest.config.ts，让Jest正确转译pdfjs相关文件：

1. 更新esModules列表，加入pdfjs-dist和vue-pdf-embed：

const esModules = ['quasar', 'quasar/lang', 'lodash-es', 'cnpj', 'pdfjs-dist', 'vue-pdf-embed'].join('|');

2. 在transform中添加对pdfjs Worker文件的转译规则：

transform: {
  // 保留原有规则...
  'pdfjs-dist/build/pdf.worker.js': 'babel-jest',
}

3. 确保transformIgnorePatterns同步更新：

transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],

方案3：直接Mock整个vue-pdf-embed组件 #

如果测试不需要验证PDF渲染的具体逻辑，可直接在测试文件中mock组件：

jest.mock('vue-pdf-embed', () => ({
  default: {
    name: 'VuePdfEmbed',
    template: '<div data-testid="mock-pdf-embed"></div>',
  },
}));

验证 #

重新运行Jest测试，确认"Inline worker is not supported"错误消失，测试流程正常执行。

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