IT技术 - 如何使用 Jest 和 react-testing-library 测试 Websocket 客户端 - 吾爱随笔录

我正在使用 create-react-app、Jest 和 react-testing-library 来配置聊天机器人项目。

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

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 消息，是否出现带有 conteining 消息的警报框等。我浏览了互联网，找到了jest-websocket-mock库，但似乎我也需要用这个库来模拟客户端，但我只想模拟服务器并期望客户端连接模拟的 WebSocket 服务器，您有什么想法吗？

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.... })