reactjs - React 测试库模拟 rxjs webSocket

Question

有人可以举例说明如何使用“React 测试库”模拟“RXJS/Websocket”。

我在这里真的很挣扎，并且使用了各种库，例如“jest-websocket-mock”。然而，这些似乎都没有建立到本地存根的连接。

你能发一个例子吗

标签： reactjswebsocketrxjsreact-testing-library

Answer 1

找到解决方案。完整代码可以在这里找到：https ://github.com/rottitime/jest-websocket-mock-rsjx/tree/main/examples

零件

    import React, {useEffect, useState } from "react";
import { webSocket } from "rxjs/webSocket";
import { Subject } from 'rxjs';
import { retryWhen, delay, tap } from 'rxjs/operators';
import {QueueingSubject} from 'queueing-subject' 

const receiver$ = new Subject();
const sender$ = new QueueingSubject();
const ws$ = webSocket("ws://localhost:8080");

const Rsjx = () => {
const [messages,setMessage] = useState([])
useEffect(() => {
    receiver$.subscribe(res => setMessage(old => [...old, JSON.stringify(res)]) )
    receiver$.next({message: true})

    ws$.pipe(
    retryWhen(
        err$ => err$.pipe(
        tap(() => console.warn(`Websocket failed to. Retrying in seconds`)),
        // delay(10_000)
    ))
    )

    ws$.subscribe(receiver$);
    sender$.subscribe(ws$)

    receiver$.next('reciever$ got this directly')
    sender$.next('sender$ sent to server1: ' + Math.random(100*10000000))
    sender$.next('sender$ sent to server2: ' + Math.random(100*10000000))
    sender$.next('sender$ sent to server3: ' + Math.random(100*10000000))
}, [])

return <>
    <h1>RSJX</h1>
    <ol>
    {messages.map((message,i) => <li key={i}>recieved: {message}</li> )}
    </ol>
</>
}
export default Rsjx

测试

import React from "react";
import { render, act } from '@testing-library/react';
import Rsjx from "../Rsjx";
import WS from "jest-websocket-mock";

let server, client

describe("The Rsjx component", () => {
beforeEach(async () => {
  server = new WS('ws://localhost:8080', {jsonProtocol: true});
  client = new WebSocket("ws://localhost:8080");
  await server.connected;
  global.Math.random = () => 123
});
afterEach(() => {
  WS.clean();
});

it("the server keeps track of received messages, and yields them as they come in", async () => {
    server.on('connection', socket => {
      socket.on('message', data => {
          // console.log('*****************Server recieved', data)
          act(() => {
            /* fire events that update state */
            socket.send(`{"server v2": ${data}}` );
          });
          
      });
    });

    const screen = await render(<Rsjx />);
   
    await expect(server).toReceiveMessage('sender$ sent to server1: 123');
    expect(screen.getByText('recieved: {"server v2":"sender$ sent to server1: 123"}')).toBeInTheDocument();
    await expect(server).toReceiveMessage('sender$ sent to server2: 123');
    expect(screen.getByText('recieved: {"server v2":"sender$ sent to server2: 123"}')).toBeInTheDocument();
    await expect(server).toReceiveMessage('sender$ sent to server3: 123');
    expect(screen.getByText('recieved: {"server v2":"sender$ sent to server3: 123"}')).toBeInTheDocument();
  });


});