Cypress で画像ファイルをエンコードせずに読み込もうとした際に苦労したので、その方法を紹介します。

困ったこと

Cypress を使って、Amazon S3 に画像ファイルをアップロードする処理をテストするコードを以下のように実装しました。

./cypress/integration/upload-file-spec.ts

describe('シナリオテスト', () => {
  it('画像ファイルアップロード', () => {
    // (1)
    cy.fixture('image.png', 'binary').then((image) => {
      cy.request({
        method: 'PUT',
        url: 'アップロード先のURL',
        body: image,
      }).then((response) => {
        expect(response.status).to.eq(200);
      });
    });
  });
});

項番	説明
(1)	エンコード形式を `binary` にして画像ファイルを読み込みます。

上記のコードを実行するとアップロード自体はできます。
しかし、S3 にアップロードされた画像ファイルを開こうとすると、ファイルが壊れていて開けません。
ファイルをメモ帳などで開いてみると、元ファイルから微妙に中身が変わっていました。

解決法

画像ファイルを読み込む際のエンコード形式に null を指定して buffer 形式で読み込みます。
その後 new Blob() でバイナリ形式に戻すことで正常に画像ファイルをアップロードできます。

./cypress/integration/upload-file-spec.ts

describe('シナリオテスト', () => {
  it('画像ファイルアップロード', () => {
    // (1)
    cy.fixture('image.png', null).then((image) => {
      cy.request({
        method: 'PUT',
        url: 'アップロード先のURL',
        // (2)
        body: new Blob(image),
      }).then((response) => {
        expect(response.status).to.eq(200);
      });
    });
  });
});

項番	説明
(1)	エンコード形式を `null` にして buffer 形式で画像ファイルを読み込みます。
(2)	buffer 形式からバイナリ形式にして画像ファイルをアップロードします。

余談

binary で読み込めばいいだろうと思っていたので、解決に時間がかかりました。
使っているツールの知識だけじゃなく、エンコードやバイナリファイルの仕様などツールによらない知識も必要であることを痛感しました。