Как проверить websocket с шуткой и энзимом? - PullRequest
Новая
       11

Как проверить websocket с шуткой и энзимом?

3 голосов
/ 18 апреля 2020

Я создаю веб-приложение и wi sh для его модульного тестирования. Он также имеет внутренний интерфейс Socket.io (expressjs backend) и клиент socket.io для приложения реагирования, которое является приложением create-реакция-приложение. Вот тест до сих пор: 

import React from 'react';

// 3rd party imports 
import { render } from '@testing-library/react';
import { shallow, mount } from "enzyme";
import { SocketIO, Server } from 'mock-socket';

// custom imports
import App from '../App';
import Tasks from '../components/Tasks';

describe('App', () => {
  let wrapper, shallowWrapper;
  const mockServer = new Server('ws://localhost:8080');
  window.io = SocketIO;
  beforeEach(async () => {
    wrapper = mount(<App />);
    //start web socket config with mock-server
    mockServer.on('connection', socket => {
      socket.emit('task', 'test message from mock server');
    });
  // end web socket config
    shallowWrapper = shallow(<App />);
  });

  it("renders", () => {
    shallow(<App />);
  });

  test('renders right text', () => {
    const { getByText } = render(<App />);
    const linkElement = getByText(/BI4 Monitor/i);
    expect(linkElement).toBeInTheDocument();
  });

  it('has one unordered list', () =>{
    expect(wrapper.find("ul")).toHaveLength(0);
  });

  it("displays initial empty list", () => {
    expect(wrapper.find("li")).toHaveLength(0);
  });

  it("has Tasks component", () => {
    console.log(shallowWrapper.debug())
    expect(shallowWrapper.contains(<Tasks/>)).toBe(true);
  });

});

Я использую эту ложную библиотеку: https://github.com/thoov/mock-socket

Вот приложение. js

import React, { useEffect, useState } from 'react';

// 3rd party imports
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import { useImmer } from 'use-immer';
import _ from "underscore";

// custom imports
import { SocketUtil } from './utils';
import Tasks from './components/Tasks';

const socket = SocketUtil.init();

function App() {
  const [msg, setMsg] = useState([]);
  function handleData(payload) {
    // data = [...data, payload]
    setMsg(m => m.concat(payload));
  }

  useEffect(() => {
     socket.on('task', payload => {
       console.log("taskkkk")
       handleData(payload);
     });
  });


  return (
    <Container>
      <Row className="row">
        <Col xs={12}>
          <h1>BI4 Monitor</h1>
          {/* <Tasks/> */}
          {_.map(msg, function(m) {
            return (
              <p>{m.key}</p>
            );
          })}
          <Tasks/>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

Я могу sh напечатать это console.log("taskkkk") или, в основном, просто модульное тестирование, чтобы увидеть, как более одного <p>{m.key}</p> рендерится, но не происходит. Также я попробовал с https://github.com/romgain/jest-websocket-mock, но не повезло. Есть идеи, как этого достичь?

...