如何在Angular/Jasmine单元测试中加载本地测试文件？

针对浏览器环境下的Jasmine/Karma测试无法使用Node.js fs模块读取文件的问题，以下是三个可行的实用方案：

方案1：使用Webpack Loader直接导入二进制文件（推荐） #

Angular默认基于Webpack构建测试代码，可通过raw-loader将二进制文件直接导入为Uint8Array，再转换为所需的ArrayBuffer：

步骤1：安装依赖 #

npm install raw-loader --save-dev

步骤2：添加类型声明 #

在项目根目录或测试目录创建typings.d.ts文件，声明二进制文件的导入类型：

declare module '*.sbsong' {
  const content: Uint8Array;
  export default content;
}

步骤3：调整测试TS配置 #

修改tsconfig.spec.json，在compilerOptions中启用合成默认导入：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    // 保留原有其他配置
  }
}

步骤4：在测试中导入并使用文件 #

将测试用的sbsong文件放到src/test-files目录，然后在测试代码中直接导入：

// test.spec.ts
import songFile from '../test-files/Be Near.sbsong';

it('should return a song for a SongShow Plus 7 file1', () => {
  const testFile: IRawDataFile = {
    name: 'Be Near',
    ext: 'sbsong',
    type: '',
    dataAsBuffer: songFile.buffer, // 直接获取ArrayBuffer
    dataAsString: ''
  };

  expect(inputConverter.extractSongData(testFile)).toEqual({
    fileName: testFile.name,
    title: 'Be Near',
    info: [
      { name: 'Author', value: 'Barnard, Shane' },
      { name: 'Copyright', value: '2003 Waiting Room Music' },
      { name: 'CCLI', value: '4090362' },
      { name: 'Key', value: 'B' },
    ],
    slides: [/* 预期的幻灯片数据 */]
  });
});

方案2：将二进制文件转为Base64编码后导入 #

如果不想配置Webpack loader，可以手动或自动化将二进制文件转为Base64，再在测试中解码为ArrayBuffer：

步骤1：生成Base64编码 #

用Node脚本自动化转换（避免手动复制出错）：

// base64-convert.js
const fs = require('fs');
const filePath = './Be Near.sbsong';
const base64Content = fs.readFileSync(filePath, 'base64');
fs.writeFileSync('./be-near-base64.ts', `export const beNearBase64 = '${base64Content}';`);

运行脚本：

node base64-convert.js

步骤2：在测试中解码使用 #

// test.spec.ts
import { beNearBase64 } from './be-near-base64';

function base64ToBuffer(base64: string): ArrayBuffer {
  const binaryStr = atob(base64);
  const bytes = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    bytes[i] = binaryStr.charCodeAt(i);
  }
  return bytes.buffer;
}

it('should return a song for a SongShow Plus 7 file1', () => {
  const testFile: IRawDataFile = {
    name: 'Be Near',
    ext: 'sbsong',
    type: '',
    dataAsBuffer: base64ToBuffer(beNearBase64),
    dataAsString: ''
  };

  expect(inputConverter.extractSongData(testFile)).toEqual({
    // 预期结果...
  });
});

方案3：通过Karma静态服务加载文件 #

将测试文件配置为Karma的静态资源，用fetch在测试中异步加载：

步骤1：修改Karma配置 #

在karma.conf.js的files数组中添加测试文件配置：

module.exports = function(config) {
  config.set({
    files: [
      // 保留原有文件配置
      { pattern: 'src/test-files/*.sbsong', watched: false, included: false, served: true }
    ],
    // 其他Karma配置...
  });
};

步骤2：在测试中异步加载文件 #

// test.spec.ts
it('should return a song for a SongShow Plus 7 file1', async () => {
  // Karma静态资源根路径为/base/，根据实际文件位置调整路径
  const response = await fetch('/base/src/test-files/Be Near.sbsong');
  const arrayBuffer = await response.arrayBuffer();

  const testFile: IRawDataFile = {
    name: 'Be Near',
    ext: 'sbsong',
    type: '',
    dataAsBuffer: arrayBuffer,
    dataAsString: ''
  };

  const result = inputConverter.extractSongData(testFile);
  expect(result).toEqual({
    // 预期结果...
  });
});

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