component test with cypress failing to connect Websocket(signalR)- WebSocket opening handshake timed out

We are writing component test in cypress on a React-JS application which uses signalR for the websocket. Restful APIs are developed in dotnet core.

The test contains of usual cy.intercept commands trying to mock the APIs

While running the test the application is trying to reach a signalR endpoint '/testhub' internally and failing out giving the following error -

> WebSocketTransport.js:49 WebSocket connection to 'ws://localhost:8080/testhub' failed: WebSocket opening handshake timed out
>
>(uncaught exception)Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

Below is the test file:

describe('<Jobs Page>', () => {
        
   
    it('verify the data displaying in jobs page', () => {
        cy.viewport(1000,1000)

        //mocking the API       
        cy.intercept( "GET","api/jobs/testhub",{ fixture: 'testData.json'})       

        //Arranging or mounting a component
        cy.mount(<Job/>)

       
    })  


})

We tried using "cypress-plugin-signalr", "socket.io-mock" plugins and mocking the websocket, but nothing fruitful.

Also not sure what is the endpoint signalR is expecting? The application UI are referring to 'http' urls whereas signalR endpoint is expecting 'ws'.

There is a tutorial here Test a Socket.io Chat App using Cypress that should help you.

There are a couple of strategies shown on how to connect

• using a task (note the code is for pre Cypress v10 configuration)

• using socket.io-client connection in test

This second approach uses socket events rather than cy.intercept(). I can't tell what your protocol is, but the following seems a reasonable approximation.

const fixtureData = require('cypress/fixtures/testData.json')
const io = require('socket.io-client')
const socket = io.connect('ws://localhost:8080/testhub')

it('verify the data displaying in jobs page', () => {

  // use socket to catch messages
  socket.on('get_data', () => {           // check what message initiates data fetch
    socket.emit('data', fixtureData)      // also modify this message appropriately
  })

  cy.mount(<Job/>)

  ...
})

I created my own plugin that is based on "cypress-plugin-signalr" called: Cypress-SignalR-Mock

A simple usage example:

// 01. Import the plugin to where your signalR connections are created.
import {useCypressSignalRMock} from 'cypress-signalr-mock';

// 02. Call "useCypressSignalRMock" to create a mock for the SignalR hub connection, 
// make sure to give it an unique hub name. It will return null when Cypress is not running.
const progressHubConnection = useCypressSignalRMock('progress') ??
    new HubConnectionBuilder().withUrl(`http://localhost:3000/progress`).build();

// 03. Activate the plugin in your cypress/support/index.[js/ts] file.
import 'cypress-signalr-mock';

// 04. Use 'hubPublish()' in your E2E tests to publish messages as if it's the server.
cy.hubPublish(
    'progress', // The name of the hub
    'hello-world', // The name of the message type
    {
        message: 'Hello World!', // The message payload
    },
);

// 05. The listener will receive the message as normal.
progressHubConnection.on('hello-world', (data) => {
    console.log(data); // { message: 'Hello World!' }
});