React Jest测试中如何创建有效的Blob对象？

嘿，别担心，作为新手遇到这个问题太正常啦！你说得没错，Jest默认运行在Node.js环境中，而Node本身并没有实现浏览器原生的Blob对象，所以直接用new Blob()会得到一个简化的模拟对象（就是你看到的Blob {}），它没有浏览器里Blob的完整属性和行为。下面给你几种实用的解决办法：

方法一：用jsdom模拟浏览器环境 #

jsdom是一个在Node中模拟浏览器DOM的库，它包含了Blob的完整实现。

1. 先安装依赖：

npm install --save-dev jsdom

2. 在你的测试文件顶部添加以下代码，或者配置到Jest的全局设置文件（比如setupFilesAfterEnv）：

import { JSDOM } from 'jsdom';

// 创建一个模拟的DOM环境
const dom = new JSDOM('<!doctype html>');
// 将jsdom的Blob挂载到全局对象，这样测试里就能直接用new Blob了
global.Blob = dom.window.Blob;

之后再运行你的代码，console.log(myBlob)就能看到带有size、type等属性的正常Blob对象了。

方法二：手动模拟Blob（轻量版） #

如果只需要满足基本测试需求，不想引入额外库，可以手动写一个简单的Blob模拟类：

// 在测试文件的最开头添加这个模拟
global.Blob = class Blob {
  constructor(parts, options) {
    this.parts = parts;
    this.type = options?.type || '';
    // 计算内容大小（这里简单处理，假设parts是字符串数组）
    this.size = parts.reduce((total, part) => total + part.length, 0);
  }
};

这样创建的Blob对象会包含你需要的基本属性，console.log时也能看到这些内容，足够应对大多数简单测试场景。

方法三：用Node的Buffer替代（适合Node环境场景） #

如果你的代码不需要严格的Blob对象，也可以用Node原生的Buffer来替代，因为Buffer和Blob在处理二进制数据上很相似：

// 用Buffer创建二进制数据（你的字符串是base64格式，所以指定编码）
const imageBuffer = Buffer.from(`/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/ 2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/`, 'base64');

// 如果你的业务代码必须接收Blob，也可以把Buffer包装成模拟Blob
const myBlob = new Blob([imageBuffer], { type: 'image/jpeg' });

补充说明：你之前看到的Blob {}并不是真的空对象，只是Jest默认的模拟实现没有把内部属性暴露出来让console打印。用上面任意一种方法，都能让你创建出在测试中可用的Blob对象。

慢慢来，测试环境和浏览器环境的差异是新手常踩的坑，多试几次就熟练啦！

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