在Jest中使用jasmine-jquery加载测试Fixture遇问题求解决方案

刚从Karma迁移到Jest的时候，我也踩过jasmine-jquery fixture加载失败的坑——核心原因是Jest跑在Node环境里，不像Karma有浏览器端的HTTP服务支撑，原来依赖HTTP请求加载fixture的逻辑自然就失效了。下面给你几个可行的解决方向：

方案一：用jest-jquery适配器兼容原有代码 #

这是改动最小的方案，专门的适配器能让jasmine-jquery在Jest环境里正常工作：

• 先安装依赖：

  npm install jest-jquery --save-dev
  

• 在你的Jest配置文件（比如jest.config.js）里指定测试启动后要加载的文件：

  module.exports = {
    setupFilesAfterEnv: ['<rootDir>/src/setup-jest.js'],
    // 其他原有配置...
  };
  

• 在setup-jest.js文件里引入适配器：

  import 'jest-jquery';
  

• 调整Fixture路径：Jest里不需要Karma那套base/前缀，直接用相对路径或者基于项目根目录的绝对路径。比如你可以在测试文件里先设置fixture的根路径：

  jasmine.getFixtures().fixturesPath = '<rootDir>/test/fixtures';
  

  之后加载fixture时直接写文件名就行：

  loadFixtures('my-fixture.html');
  

方案二：手动读取Fixture文件（脱离jasmine-jquery） #

如果想逐步摆脱对jasmine-jquery的依赖，直接用Node的文件系统API读取HTML是个更灵活的选择：

• 确保Jest配置了jsdom环境（Jest 28+需要手动安装jsdom）：

  npm install jsdom --save-dev
  

  在jest.config.js里添加：

  module.exports = {
    testEnvironment: 'jsdom',
    // 其他配置...
  };
  

• 写一个简单的工具函数加载fixture：

  const fs = require('fs');
  const path = require('path');
  
  function loadFixture(fixtureName) {
    // 根据你的实际路径调整这里的相对位置
    const fixturePath = path.resolve(__dirname, `../fixtures/${fixtureName}.html`);
    const fixtureHtml = fs.readFileSync(fixturePath, 'utf8');
    // 把HTML插入到Jest的模拟DOM中
    document.body.innerHTML = fixtureHtml;
  }
  

• 在测试用例里直接调用这个函数就行：

  beforeEach(() => {
    loadFixture('my-fixture');
  });
  

方案三：用Jest模块映射加载HTML文件 #

这种方式可以把HTML文件当成字符串模块导入，也能配合原有测试逻辑：

• 在jest.config.js里添加模块映射规则：

  module.exports = {
    moduleNameMapper: {
      '\\.(html)$': '<rootDir>/jest/html-loader.js',
    },
    // 其他配置...
  };
  

• 创建jest/html-loader.js文件，用来处理HTML文件的加载：

  const fs = require('fs');
  
  module.exports = {
    process(src, filename) {
      return `module.exports = ${JSON.stringify(fs.readFileSync(filename, 'utf8'))};`;
    },
  };
  

• 之后在测试文件里就能直接导入HTML文件，再插入到DOM：

  import myFixture from '../fixtures/my-fixture.html';
  
  beforeEach(() => {
    document.body.innerHTML = myFixture;
  });
  

总结一下：如果想尽量保留原有测试代码，方案一最省心；如果想彻底重构测试逻辑，方案二或三更适合。

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