Mock RTK WebSockets

[kasir-barati]

Hi dear reader

I was looking at this lib and could not find any clue on how you should mock your WebSocket when you are using a library like Redux and SocketIO. Let's say you have a RTK query like this:

endpoints: (build) => ({
  someSubscription: build.query<ResponseSchema[], void>({
    queryFn: async () => {
      return { data: null }
    },
    async onCacheEntryAdded(_, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
      const socket = io('ws://localhost:3000/', {
        withCredentials: true,
        transports: ['websocket'],
      })
      socket.on("message", () => {/* cache received msg in */})
      socket.close()
    },
  }),
})

How can I mock the cached data? is it even possible to do it with this lib? if not with what I can do that?

[kasir-barati]

I think we need to leverage and utilise two things at the same time, the first one I think is this addon and the other one might be: https://github.com/thoov/mock-socket

After a few weeks I ended up asking same question and landing back to this page again but not luck still 😭

[yannbf]

Hey there! MSW didn't support mocking web sockets before but it seems like it does now! If you're willing to make a contribution to this repo with a reasonable, simple websocket example, we can try to set mocks for it and it can serve as reference for others!

cc @kettanaito

[kettanaito]

Second what @yannbf is saying here! We are bringing a first-class WebSocket support to MSW, which is already available in a public beta.

npm i msw@next

• Learn how to use: https://website-git-docs-ws-mswjs.vercel.app/docs/basics/handling-websocket-events
• Share feedback: WebSocket Support Beta msw#2010

I've got a few usage examples as well, feel free to reference those.

[kettanaito]

MSW supports mocking WebSockets since [email protected].

• Docs: Handling WebSocket events

Minimal usage example:

import { ws } from 'msw'

const chat = ws.link('wss://api.example.com/chat')

export const YourStory = {
  parameters: {
    msw: {
      handlers: [
        chat.addEventListener('connection', ({ client }) => {
          client.send('Hello from mock!')
        })
      ]
    }
  }
}