Patch upgrade from 2.4.1 to 2.4.4 breaks tests with TypeError: myFile?.slice(...).arrayBuffer is not a function

[corneliusroemer]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

22.8

Reproduction repository

loculus-project/loculus@c813cd9

Reproduction steps

gh repo clone https://github.com/loculus-project/loculus/pull/2755/commits/c813cd965449e820c9ac52ae183645a1301c2ebb
cd website
nvm use
npm ci
npm run test-fast

Current behavior

Getting error:

TypeError: myFile?.slice(...).arrayBuffer is not a function
 ❯ Timeout._onTimeout src/components/Submission/DataUploadForm.tsx:186:18
    184|             myFile
    185|                 ?.slice(0, 1)
    186|                 .arrayBuffer()
       |                  ^
    187|                 .catch(() => {
    188|                     setMyFile(null);
 ❯ listOnTimeout node:internal/timers:594:17
 ❯ processTimers node:internal/timers:529:7

 FAIL  src/components/Submission/SubmissionForm.spec.tsx > SubmitForm > should unexpected error with proper error message
TestingLibraryElementError: Unable to find an element with the text: (text) => text.includes(receivedUnexpectedMessageFromBackend). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Expected behavior

No error when doing patch update from 2.4.1 to 2.4.4

[ddolcimascolo]

Hi everyone,

I also have all tests broken but with a different error, adding here for simplicity but I'm OK to open a new issue if you want. I'm upgrading from 4.2.2 to 4.2.4 and I'm using Vitest as my test runner.

Stacktrace:

TypeError: unusable
❯ Request.clone node:internal/deps/undici/undici:5434:17
❯ XMLHttpRequestController.respondWith node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts:299:29
❯ Object.onResponse node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts:70:24
❯ handleResponse node_modules/@mswjs/interceptors/src/utils/handleRequest.ts:55:21
❯ handleRequest node_modules/@mswjs/interceptors/src/utils/handleRequest.ts:207:12
❯ runNextTicks node:internal/process/task_queues:60:5
❯ processTimers node:internal/timers:511:9
❯ XMLHttpRequestController.xhrRequestController.onRequest node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts:64:34

Thanks,
David

[jpreis]

We encounter the same issue as @ddolcimascolo after upgrading from 2.4.2 to 2.4.2 (we're also using Vitest).

Edit: Fix versions, thanks @corneliusroemer :)

[kettanaito]

@ddolcimascolo, this one looks related to mswjs/interceptors#630.

[corneliusroemer]

I'm upgrading from 4.2.2 to 4.2.4 and I'm using Vitest as my test runner.

I think you all mean 2.4.2 not 4.2.2 🙃

[ddolcimascolo]

I'm upgrading from 4.2.2 to 4.2.4 and I'm using Vitest as my test runner.

I think you all mean 2.4.2 not 4.2.2 🙃

Indeed 😅

[frodeaa]

Seems to also break the Request type

TypeError: Cannot read properties of undefined (reading 'push')
             request.headers.set("Authorization", `Bearer ${accessToken}`);

The headers on the request object have changed from a Headers object where set is supported to an Map object

[kettanaito]

None of these errors look MSW related (at least directly). I highly recommend you check your Node.js versions because MSW in no shape or form influences how Request/Response/Headers function.

[frodeaa]

None of these errors look MSW related (at least directly). I highly recommend you check your Node.js versions because MSW in no shape or form influences how Request/Response/Headers function.

Tested v2.4.3, no issue, the upgrade from v2.4.3 to v2.4.4 break the previous behaviour

[frodeaa]

Using resolution to downgrade the transitive dependency on "@mswjs/interceptors@^0.35.0 to v0.33.0 fixes the issue, so it seems to be an issue cause by changed done in v0.34.0

[jgarplind]

None of these errors look MSW related (at least directly). I highly recommend you check your Node.js versions because MSW in no shape or form influences how Request/Response/Headers function.

Tested v2.4.3, no issue, the upgrade from v2.4.3 to v2.4.4 break the previous behaviour

By bisecting I arrived at the same msw version causing us test errors when running vitest, though, like other users, we are seeing a different error. Partial stack trace:

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
TypeError: unusable
❯ Request.clone node:internal/deps/undici/undici:6232:17
...
XMLHttpRequestController.xhrRequestController.onRequest ../node_modules/.pnpm/@mswjs[email protected]/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts:64:34

[greysteil]

Seeing the same issue as @ddolcimascolo on 2.4.4. Also using vitest:

TypeError: unusable
 ❯ Request.clone node:internal/deps/undici/undici:9651:17
 ❯ XMLHttpRequestController.respondWith node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts:299:29
 ❯ Object.onResponse node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts:70:24
 ❯ handleResponse node_modules/@mswjs/interceptors/src/utils/handleRequest.ts:55:21
 ❯ handleRequest node_modules/@mswjs/interceptors/src/utils/handleRequest.ts:207:12
 ❯ XMLHttpRequestController.xhrRequestController.onRequest node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts:64:34

Downgrading @mswjs/interceptors to 0.33.3 works for us, too, suggesting mswjs/interceptors#630 might be the underlying issue.