Request bodies of URLSearchParams can not be read #1365
Comments
markdon
added
bug
|
Hey, @markdon. Thanks for reporting this. We are working on improving how request bodies are read, and this use case is going to the list of things we need to account for. Meanwhile, you can still use |
|
Actually, I only spent the time investigating this after I can refactor the few of my tests this affected to move to latest msw. Debug log snippetxhr:request POST /login middleware function threw an exception! TypeError: The "input" argument must be an instance of ArrayBuffer or ArrayBufferView. Received an instance of URLSearchParams
at new NodeError (node:internal/errors:371:5)
at TextDecoder.decode (node:internal/encoding:413:15)
at decodeBuffer (/Users/mark/projects/cra-msw/node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:11:18)
at RestRequest.body (/Users/mark/projects/cra-msw/node_modules/msw/src/utils/request/MockedRequest.ts:111:18)
at /Users/mark/projects/cra-msw/src/setupTests.ts:8:44
at /Users/mark/projects/cra-msw/node_modules/msw/src/handlers/RequestHandler.ts:232:55
at RestHandler.run (/Users/mark/projects/cra-msw/node_modules/msw/src/handlers/RequestHandler.ts:215:34)
at /Users/mark/projects/cra-msw/node_modules/msw/src/utils/getResponse.ts:50:34
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at getResponse (/Users/mark/projects/cra-msw/node_modules/msw/src/utils/getResponse.ts:41:18) {
code: 'ERR_INVALID_ARG_TYPE'
} +12ms
|
|
Oh, so the reason is not to read the body but to construct it. He'd have to support that. We're using something called So, I'd imagine this support to be:
Contributions are welcome! |
|
Sounds pretty straight forward to implement! I would love to contribute, if I hadn't just signed up to a project with a tight timeline for the next few months. I will check back later! |
|
My workaround, which was actually for jest.spyOn(global, "FormData").mockImplementation(mockFormDataForMSW);
jest.mock("util", mockNodeUtilForMSW);
function mockFormDataForMSW() {
return new FormDataFakeArrayBuffer(0) as unknown as FormData;
}
function mockNodeUtilForMSW() {
const real = jest.requireActual("util") as typeof import("util");
return {
...real,
TextDecoder: class extends real.TextDecoder {
decode(
input?: NodeJS.ArrayBufferView | ArrayBuffer | null,
options?: { stream?: boolean | undefined },
): string {
if (input instanceof FormDataFakeArrayBuffer) return input.toString();
return super.decode(input, options);
}
},
};
}
class FormDataFakeArrayBuffer extends ArrayBuffer {
private params = new URLSearchParams();
append(param: string, value: string) {
return this.params.append(param, value);
}
toString() {
return this.params.toString();
}
}For reference/SEO, the error was: or |
|
I'm not sure why I didn't consider this before but surely the easiest workaround (for URLSearchParams) is to create the request with a string instead of URLSearchParams object. e.g. use The MSW handler will always need to parse the text body with |
|
Same issue as mine in #1327 but with New features keep getting added in the 0.x line so that it's totally OK to break stuff from a semver perspective. And bugs are not fixed. #sadness |
|
Same problem here. |
|
I used Axios instead of Fetch and it works ! |
|
@ddolcimascolo, a true sadness is having a 7M/week downloaded library used by FAANG and having to develop it over weekends instead of spending time with one's family (which I've promised myself not to do anymore, thus you will have issues that I don't have time/desire to work on). But hey, you can take a step towards resolving that sadness, here you go. This is going to be fixed by #1436 so I'm not going to do any work around this until that API lands. If you're blocked by this, consider contributing, I'd do my best to review your code and release it. |
|
Yeah. My message above was itself sad, sorry about that, probably written while closing yet another upgrade merge request on MSW that I can't merge because of this blocker. You do a great job in maintaining OSS projects, keep up the great work! Since my message above I've contributed a fix, even though you implemented #1436 in the end which is a really nice addition. Cheers, |
It looks like a lot of progress has been made towards the Fetch API update that replaces the related code and fixes this issue. There's a beta available to try. I had a quick look at making a fix for the current release of msw but @mswjs/interceptors has already moved on from the related IsomorphicRequest class and the Fetch API update looks pretty close to done anyway. |
|
Hey, just little question from me. I am using latest msw, node and react-query@^3.39.2. "The "input" argument must be an instance of ArrayBuffer or ArrayBufferView. Received an instance of URLSearchParams." I guess, #1436 is fixing it also for this case, right? Otherwise what is the status of completition @kettanaito ? |
|
@DusanPausly, correct. The current version of MSW doesn't support |
Released: v2.0.0 🎉This has been released in v2.0.0! Make sure to always update to the latest version ( Predictable release automation by @ossjs/release. |
Prerequisites
Environment check
mswversionNode.js version
v16.13.0
Reproduction repository
https://github.com/markdon/cra-msw
Reproduction steps
clone repo
npm iDEBUG=* npm run test -- --watchAll=falseCurrent behavior
I think this is related to #1318
When handling a fetch request where the request body is a URLSearchParameters object, the body can not be read in the handler. This was previously available through
request.body(v0.27.1).request.bodyis now deprecated.I would expect to be able to just use the newer
request.text(), however this seems to throw an error parsing the body.Debug logs. See ERR_INVALID_ARG_TYPE
Expected behavior
A request body of type URLSearchParameters should be able to be read in a handler. I suggest via
request.text(), which would return the value of URLSearchParameters.toString().The text was updated successfully, but these errors were encountered: