Jest单元测试中如何从public文件夹提供iframe依赖资产

你的问题核心是Jest默认不会模拟静态资源服务器，导致iframe里指向public文件夹的资产加载失败。试试这几个方案：

1. 用jest-static-stubs模拟静态资源服务 #

这个插件能在测试时帮你把public文件夹的资源映射到对应的URL路径：

• 先装依赖：

npm install jest-static-stubs --save-dev

• 然后在jest.config.js里加配置：

module.exports = {
  // 保留你原有的其他配置
  setupFilesAfterEnv: ['jest-static-stubs'],
  staticStubs: {
    paths: ['public/js/pdftron'], // 把你需要的静态资源目录填进去
    serveFrom: '/', // 和iframe里的basePath保持一致
  },
};

配置完后，测试时iframe请求的/js/pdftron/...路径就能正确访问到public里的文件了。

2. 用moduleNameMapper映射路径+Mock iframe加载 #

如果不需要实际加载资源，只是让路径解析正确，同时避免iframe发起真实请求：

• 在jest.config.js里添加路径映射：

module.exports = {
  // 其他配置
  moduleNameMapper: {
    '^/js/pdftron/(.*)$': '<rootDir>/public/js/pdftron/$1',
    '^/publicjs/pdftron/(.*)$': '<rootDir>/public/js/pdftron/$1', // 对应你iframe里的css路径
  },
};

• 然后在测试文件里阻止iframe加载：

beforeAll(() => {
  jest.spyOn(HTMLIFrameElement.prototype, 'src', 'set').mockImplementation(() => {});
});

这样既解决了路径问题，又不会让测试时加载真实的iframe内容。

3. 自定义jsdom的资源加载器 #

Jest用jsdom做测试环境，可以自己写逻辑加载本地public文件：

• 修改jest.config.js：

const fs = require('fs');
const path = require('path');

module.exports = {
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    resourceLoader: (url) => {
      // 处理iframe请求的本地路径
      if (url.startsWith('/js/pdftron/')) {
        const filePath = path.join(__dirname, 'public', url.slice(1));
        // 根据文件类型调整读取方式，比如html/css用utf8，pdf用二进制
        if (filePath.endsWith('.pdf')) {
          return fs.readFileSync(filePath);
        }
        return fs.readFileSync(filePath, 'utf8');
      }
      return '';
    },
  },
  // 其他原有配置
};

这个方法能真实加载本地文件，但需要处理不同类型资源的读取逻辑，适合需要验证iframe内容的测试场景。

4. 直接Mock第三方Viewer组件 #

如果你的测试只需要验证组件是否正确渲染Viewer，不需要测试Viewer的功能，直接mock掉第三方包最省事：

// 在测试文件顶部mock第三方包
jest.mock('你的第三方Viewer包名', () => () => <div data-testid="mock-webviewer" />);

// 测试用例
test('组件正常渲染Viewer', () => {
  render(<YourReactComponent />);
  expect(screen.getByTestId('mock-webviewer')).toBeInTheDocument();
});

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