Question

我正在使用create-react-app，Jest和react-testing-library来配置chatbot项目。

例如，我有一个React功能组件，可以连接到WebSocket服务器，并根据WebSocket消息进行DOM更改

const LiveChat = () => {
  const [socket, setSocket] = useState(null)

   useEffect(() => {
    setSocket(new WebSocket('ws://localhost:1234'))
   }, [])

  useEffect(() => {
    socket && socket.onmessage = message => { handleAgentMessages(message.data) }
  }, [socket])

  const handleAgentMessages = message => {
     const { messageContent, messageType, secureKey } = JSON.parse(message)
     if (messageType === TEXT && messageContent) {
       alert(messageContent)
       playChatMessageSound()
     }
       ...
   }

   return (
      <div className='live-chat' data-testid='live-chat'>
          ...
      </div>
   )
}

我想测试何时出现TEXT消息，是否出现带有约束性消息的警报框等。我已经浏览了互联网，发现了jest-websocket-mock库，但是似乎我需要使用该库来模拟客户端同样，但是我只想模拟服务器并希望客户端连接模拟的WebSocket服务器，您有什么想法吗？

Answer 1

我不确定这是否正确。但这对我有用，

    global.sendMsg = null;
    global.WebSocket = class extends WebSocket {
        constructor(url) {
            super("wss://test");
            global.sendMsg = null
        }
    
        addEventListener(event, cb) {
            if (event === "open") {
                cb();
            } else if(event === "message") {
                global.sendMsg = cb;
            }
        }
    };

    test("testing message",() => {
      render(<LiveChat />);
      global.sendMsg({data:"test-msg"});
 
      expect....
    })

基本上，我重写了 WebSocket 类并将消息事件回调存储为一个常量，并在测试时触发它以模仿服务器消息。

如何使用Jest和React-Testing-Library测试Websocket Client

1 个答案: