How can I mock an RTKQ query with streaming updates inside a Cypress unit test?

[silviubogan]

Hello!

How can I mock an RTKQ query with streaming updates from an Socket.IO server inside a Cypress unit test? I would use the mock to test a React component that uses the query.

I tried cy.intercept but don't know how to use it with web sockets.

What is the good practice in this situation? Please advice.

I am currently looking into this, but I am not sure this is what I want because the Socket.IO client already exists in my web page.

Thanks.

[markerikson]

I'm using https://www.npmjs.com/package/mock-socket in my updates to the Redux Essentials tutorial example app - perhaps that would work here?

[silviubogan]

I have setup the mock-socket server inside a unit test like this:

const url = "ws://localhost:8080";

const mockServer = new Server(url, {});

mockServer.on("connection", socket => {
  socket.on("message", data => {
    socket.send("test message from mock server");
  });
});

If I also do a Socket.IO client inside the test, it works, but, with the real Socket.IO client that the tested component uses, I get this type of errors:

just like when I don't have the server.

This is the hook that the component uses:

const {
  data: timers,
  isLoading: timersLoading,
  isError: timersError
} = useGetTimersQuery(getTimersQueryParams, {
  refetchOnMountOrArgChange: true
});

and this is how the client is created within the endpoint behind the component:

// wsUrl is this: http://localhost:8080/
myGlobalIo = io(wsUrl, {
  autoConnect: false,
  port: "8080",
  path: "/"
});

Any help is greatly appreciated.

[silviubogan]

More code:

export const getWebSocketConnection = (
  initAs: "timers" | "notifications",
  arg: INotificationsChannelInitParams | ITimersChannelInitParams,
  cb?: () => void
) => {
  if (myGlobalIo === null) {
    const wsUrl = toAbsoluteUrl("/").replace(/\:(\d)+(\/)+$/g, ":8080/");
    console.log("26.1.", wsUrl);

    myGlobalIo = io(wsUrl, {
      autoConnect: false,
      port: "8080",
      path: "/"
    });

    myGlobalIo.onAny((event, ...args) => {
      // console.log("S.IO", event, args);
    });

    let invalidAuthToken = false;

    myGlobalIo.on("connect_error", err => {
      if (err.message === "invalid auth token") {
        invalidAuthToken = true;
      }
    });

    console.log("5.16.", store.getState().auth.authToken);
    myGlobalIo.auth = { authToken: store.getState().auth.authToken };

    const ch = connectHandler(initAs, arg, cb);

    myGlobalIo.on("connect", ch);

    myGlobalIo.connect();

    return { myIo: myGlobalIo, connectHandler: ch };
  } else {
    const ch = connectHandler(initAs, arg, cb);

    ch();

    return { myIo: myGlobalIo, connectHandler: ch };
  }
};

[markerikson]

My vague guess is that it might be an import ordering issue. If mock-socket tries to overwrite the global Websocket object, it may need to be imported and set up before anything else in the test file has a chance to access Websocket. But, that's just a guess.

[silviubogan]

The issue, I believe, is that I did not set window.io to the mocked client (I thought that mock-socket creates a real Socket.IO server). Any chance you know how to mock a module in Cypress component testing? I don't use window.io but rather import from the socket.io-client package. Sorry for the off-topic.