Parse FormData uploads

[nemanjam]

I have form that sends two images with additional fields as multipart/form-data

  const methods = useForm<SettingsFormData>({
    resolver: zodResolver(userUpdateSchema),
    defaultValues: {
      username: '',
      name: '',
      bio: '',
      avatar: undefined,
      header: undefined,
      password: '',
      confirmPassword: '',
    },
  });

I have patch handler that receives this data, but I want to return user as json data and to assert it in the test. On real server this handles multer but how should I do this with msw? Do you know any useful similar example?

  rest.patch<DefaultRequestBody, PathParams, ClientUser>(
    `${Routes.API.USERS}:id`,
    (req, res, ctx) => {
      const userId = req.params.id;

      if (fakeUser.id !== userId) throw new Error('Invalid fake user.id.');

      if (userId) {
        const user = req.body; // parse from FormData here???
        return res(ctx.status(200), ctx.json({ ...fakeUser, ...user }));
      }
    }
  ),

[nemanjam]

No help here after 2 months?

[nemanjam]

I parsed it like this, thank you for help.

// parse ClientUser from FormData
const myFormData = req.body as FormData;
const user = Object.fromEntries(myFormData.entries()) as unknown as ClientUser;

[JacobMGEvans]

Patching .formData() in MSW

function mockFormDataToString(this: FormData) {
	const entries = [];
	for (const [key, value] of this.entries()) {
		if (value instanceof Blob) {
			const reader = new FileReaderSync();
			reader.readAsText(value);
			const result = reader.result;
			entries.push([key, result]);
		} else {
			entries.push([key, value]);
		}
	}
	return JSON.stringify({
		__formdata: entries,
	});
}

async function mockFormDataFromString(this: MockedRequest): Promise<FormData> {
	const { __formdata } = await this.json();
	expect(__formdata).toBeInstanceOf(Array);

	const form = new FormData();
	for (const [key, value] of __formdata) {
		form.set(key, value);
	}
	return form;
}

// The following two functions workaround the fact that MSW does not yet support FormData in requests.
// We use the fact that MSW relies upon `node-fetch` internally, which will call `toString()` on the FormData object,
// rather than passing it through or serializing it as a proper FormData object.
// The hack is to serialize FormData to a JSON string by overriding `FormData.toString()`.
// And then to deserialize back to a FormData object by monkey-patching a `formData()` helper onto `MockedRequest`.
FormData.prototype.toString = mockFormDataToString;
export interface RestRequestWithFormData extends MockedRequest, RestRequest {
	formData(): Promise<FormData>;
}
(MockedRequest.prototype as RestRequestWithFormData).formData =
	mockFormDataFromString;

Reader Polyfill

/*! Read blob sync in NodeJS. MIT License. Jimmy Wärting <https://jimmy.warting.se/opensource>
 * Special Thanks to Jimmy Wärting helping in https://github.com/nodejs/undici/issues/1830
 */
const { join } = require("path");
const {
	Worker,
	receiveMessageOnPort,
	MessageChannel,
} = require("worker_threads");

/**
 * blob-worker & read-file-sync are part of a polyfill to synchronously read a blob in NodeJS
 * this is needed for MSW FormData patching to work and support Blobs, serializing them to a string before recreating the FormData.
 */
function read(blob) {
	const subChannel = new MessageChannel();
	const signal = new Int32Array(new SharedArrayBuffer(4));
	signal[0] = 0;

	const path = join(__dirname, "blob-worker.cjs");

	const worker = new Worker(path, {
		transferList: [subChannel.port1],
		workerData: {
			signal,
			port: subChannel.port1,
			blob,
		},
	});

	// Sleep until the other thread sets signal[0] to 1
	Atomics.wait(signal, 0, 0);

	// Close the worker thread
	worker.terminate();

	return receiveMessageOnPort(subChannel.port2)?.message;
}

class FileReaderSync {
	readAsArrayBuffer(blob) {
		this.result = read(blob);
	}

	readAsDataURL(blob) {
		const ab = read(blob);
		this.result = `data:${blob.type};base64,${Buffer.from(ab).toString(
			"base64"
		)}`;
	}

	readAsText(blob) {
		const ab = read(blob);
		this.result = new TextDecoder().decode(ab);
	}

	// Should not be used, use readAsArrayBuffer instead
	// readAsBinaryString(blob) { ... }
}

exports.FileReaderSync = FileReaderSync;

Worker Thread for Reader Polyfill

/*! Read blob sync in NodeJS. MIT License. Jimmy Wärting <https://jimmy.warting.se/opensource>
 * Special Thanks to Jimmy Wärting helping in https://github.com/nodejs/undici/issues/1830
 */

const { workerData } = require("worker_threads");

const { signal, port, blob } = workerData;

blob.arrayBuffer().then((ab) => {
	// Post the result back to the main thread before unlocking 'signal'
	port.postMessage(ab, [ab]);
	port.close();

	// Change the value of signal[0] to 1
	Atomics.store(signal, 0, 1);

	// This will unlock the main thread when we notify it
	Atomics.notify(signal, 0);
});