How to test your react websocket implementation with cypress

Tue, 12 May 2020 00:00:00 +0000

Set up demo application

I scaffold a standard react application

$ npx create-react-app ws-demo

Clean up and update app.js to set up a websocket client.

app.js

import React, { useState } from "react";

const App = () => {
  const [message, setMessage] = useState("websocket is closed");

  return (
    
      {message}
      
    
  );
};

export default App;

// WebsocketHandler does what the name suggests - launch/close websocket client and receive messages

const websocketUrl = "ws://127.0.0.1:5000";
const WebsocketHandler = ({ setMessage }) => {
  const ws = new WebSocket(websocketUrl);
  ws.onopen = () => {
    console.log("conn open");
    ws.send("connection is open");
  };
  ws.onmessage = (message) => {
    setMessage(message.data);
    console.log("onmessage triggered", message);
    ws.send("message received");
  };
  ws.onclose = () => {
    console.log("connection closed");
  };
  return null;
};

As highlighted, I have a WebsocketHandler component which handles websocket and sets state in app.js when it receives the message.

Websocket on Aditya Naik | Personal Website

How to test your react websocket implementation with cypress

Set up demo application