Getting a 301 error after tests have run, possibly websocket-related (msw / Apollo client / TypeScript / CRA)

Environment

Name	Version
msw	0.24.1
node	10.15.3
OS	Mac 10.14.5
@apollo/client	3.3.0
typescript	4.1.2
react-scripts	4.0.1

Request handlers

import { graphql } from 'msw';
import { seedUsers } from './seedUsers';
import { seedShows } from './seedShows';

export const handlers = [
  graphql.query('GetCurrentUser', (_, res, ctx) => {
    return res(
      ctx.data({
        getCurrentUser: seedUsers['1'],
      })
    );
  }),
  graphql.query('GetShows', (_, res, ctx) => {
    return res(
      ctx.data({
        getShows: [seedShows['1'], seedShows['2']],
      })
    );
  }),
  graphql.query('GetUsersStreamingLive', (_, res, ctx) => {
    return res(
      ctx.data({
        getUsersStreamingLive: [seedUsers['1']],
      })
    );
  }),
];

Actual request

An example of one of my requests:

const [getShows, getShowsQuery] = useLazyQuery<QueryData>(
    GET_SHOWS,
    queryOptions
  );

  useEffect(() => {
    getShows({ variables: { minShowtime, take, skip } });
  }, [getShows, minShowtime, take, skip]);

NOTE: I am using GraphQL subscriptions on a few calls, by the way – I suspect this might be related due to the websocket.js in the logs.

Current behavior

msw was working great for a while, then I upgraded msw and @apollo/client to the versions above. I did not change my test code at all. Now, my tests are flakey - sometimes they pass, sometimes they don’t - and almost always get the following 301 error:

(I am running tests with TZ=UTC react-scripts test --runInBand)

 PASS  src/screens/Home.test.tsx (6.762 s)
 PASS  src/App.test.tsx

Test Suites: 2 passed, 2 total
Tests:       1 skipped, 3 passed, 4 total
Snapshots:   0 total
Time:        9.718 s, estimated 12 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: Unexpected server response: 301
    at ClientRequestOverride.req.on (/Users/dangurney/Desktop/DanStuff/Dev/gig-window/web/node_modules/jsdom/node_modules/ws/lib/websocket.js:604:7)
    at ClientRequestOverride.emit (events.js:189:13)
    at ClientRequest.<anonymous> (/Users/dangurney/Desktop/DanStuff/Dev/gig-window/web/node_modules/node-request-interceptor/src/interceptors/ClientRequest/ClientRequestOverride.ts:287:14)
    at ClientRequest.emit (events.js:189:13)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
    at Socket.socketOnData (_http_client.js:442:20)
    at Socket.emit (events.js:189:13)
    at addChunk (_stream_readable.js:284:12)
    at readableAddChunk (_stream_readable.js:265:11)
Emitted 'error' event at:
    at abortHandshake (/Users/dangurney/Desktop/DanStuff/Dev/gig-window/web/node_modules/jsdom/node_modules/ws/lib/websocket.js:722:15)
    at ClientRequestOverride.req.on (/Users/dangurney/Desktop/DanStuff/Dev/gig-window/web/node_modules/jsdom/node_modules/ws/lib/websocket.js:604:7)
    [... lines matching original stack trace ...]
    at addChunk (_stream_readable.js:284:12)
error Command failed with exit code 1.

Expected behavior

I would expect the tests to complete successfully, as they used to before I upgraded msw and @apollo/client. The tests themselves did not change.

I wonder if possibly msw is not closing open websockets between test cases?

Screenshots

[kettanaito]

I’ve just tested the reproduction repository with yarn test and I couldn’t reproduce the issue.

• msw: 0.39.1

MSW has successfully intercepted defined GraphQL queries and returned the mocked data. The tests still fail because they are not constructed correctly (do not properly await asynchronous UI elements).

[kettanaito]

Hey, @dgurns. Thanks for reporting this.

We’ll have a look and update this issue to let you know.