如何在Angular的Jasmine/Karma测试中加载二进制文件？

问题背景 #

我有一个Angular项目，需要解析用户输入的二进制文件，但这给单元测试带来了困难。我希望能把这些二进制文件纳入到浏览器中运行的Jasmine/Karma测试里。

已完成的配置 #

我已经通过Karma的files属性将测试用的二进制文件纳入Karma的服务范围，配置如下：

karma.conf.js

files: [
  {
    pattern: "sample-files/*.sbsong",
    watched: false,
    served: true,
    included: false,
  },
],

尝试的测试代码 #

我尝试在测试中直接用require加载文件：

it('should parse a binary file', () =>{
  const file  = require('/sample-files/song1.sbsong');
  
  const parsedFile = parser(file);
  expect(parsedFile).toEqual('foo');
});

遇到的错误 #

运行测试时出现模块解析错误，提示需要合适的加载器处理二进制文件：

./sample-files/song1.sbsong:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

解决方案 #

要让Webpack返回文件的原始二进制内容，而非当作JS模块解析，可通过以下两种方式实现：

方法1：使用raw-loader #

1. 安装依赖：

npm install raw-loader --save-dev

2. 在测试代码中直接指定加载器：

it('should parse a binary file', async () =>{
  // 用raw-loader加载原始文本内容
  const fileContent = await import('raw-loader!./sample-files/song1.sbsong');
  // 转换为二进制格式（根据解析器需求选择ArrayBuffer/Uint8Array）
  const buffer = new TextEncoder().encode(fileContent.default);
  const parsedFile = parser(buffer);
  expect(parsedFile).toEqual('foo');
});

或者在Webpack测试配置中添加规则，自动对指定后缀文件使用raw-loader：

// Webpack测试配置的module.rules中新增规则
module: {
  rules: [
    {
      test: /\.sbsong$/,
      use: 'raw-loader'
    }
  ]
}

配置后即可直接用require获取文件原始内容。

方法2：通过HTTP请求加载文件 #

由于已在Karma中配置served: true，可以通过fetch请求获取二进制数据：

it('should parse a binary file', async () =>{
  // Karma会将文件托管在/base/路径下
  const response = await fetch('/base/sample-files/song1.sbsong');
  const arrayBuffer = await response.arrayBuffer();
  const parsedFile = parser(arrayBuffer);
  expect(parsedFile).toEqual('foo');
});

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