Cara menguji/mengejek klien socket.io

Saya mencoba meniru metode emit dari io tetapi saya tidak tahu cara mengejeknya. Ini adalah file Join.jsx saya

//Join.jsx

import React from 'react';
import io from 'socket.io-client';

const Join = () => {
  let socket;
  const ENDPOINT = 'localhost:5000';

  const join = () => {
    socket = io(ENDPOINT);
    socket.emit('join', { name: 'Paola', room: '1' }, () => { });
  };

  return (
    <div className="join-container">
        <a className="join-button" onClick={join}>Sign in</a>
    </div>
  );
};

export default Join;

Ini adalah satu hal yang telah saya coba

//Join.test.jsx
import React from 'react';
import { shallow } from 'enzyme';
import io from 'socket.io-client';
import Join from './Join';

describe(('Join') => {
  it(('joins a chat') => {
    jest.mock('socket.io-client', () => {
      return jest.fn(() => ({
        emit: jest.fn(),
      }));
    });
    const ENDPOINT = 'localhost:5000';
    const mockSocket = io(ENDPOINT);
    const joinWrapper = shallow(<Join />);
    joinWrapper.find('a').simulate('click');
    expect(mockSocket.emit).toHaveBeenCalledWith('join', { name: 'Paola', room: '1' }, () => { });
  })
})

Ini adalah kesalahan yang saya dapatkan di terminal

expect(received).toHaveBeenCalledWith(...expected)

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function anonymous]

      52 |     const joinWrapper = shallow(<Join />);
      53 |     joinWrapper.find('a').simulate('click');
    > 54 |     expect(mockSocket.emit).toHaveBeenCalledWith('join', { name: 'Paola', room: '1' }, () => { });
         |                             ^
      55 |   });
      56 | });
      57 |

Tolong jangan kasar dengan jawaban Anda, saya baru dalam pengujian dan saya benar-benar tersesat. Terima kasih sebelumnya atas tanggapan Anda!!


reactjs unit-testing socket.io jestjs mocking
person Paola Arredondo    schedule 26.08.2020    source sumber
comment
Pendekatan Anda cukup akurat, Anda hanya perlu memindahkan blok jest.mock dalam cakupan tempat Anda mengimpor perpustakaan, yaitu sebelum blok deskripsikan   -  person Teneff    schedule 27.08.2020

Jawaban (1)


arrow_upward
1
arrow_downward

Ada tiga masalah dengan kode pengujian Anda:

  1. Pindahkan blok kode jest.mock ke cakupan modul. Itu akan diangkat ke bagian atas blok kode. Artinya meskipun Anda import Join from './Join' modul terlebih dahulu (Pada tingkat urutan penulisan kode), modul socket.io-client akan menjadi versi tiruan, baik untuk file pengujian maupun file yang sedang diuji.

  2. Gunakan referensi yang sama dari objek soket tiruan di pabrik tiruan, jika tidak, objek soket dalam kode pengujian dan objek soket dalam kode yang diuji tidak akan menjadi referensi yang sama untuk setiap pemanggilan fungsi io.

  3. Fungsi anonim tidak memiliki referensi yang sama dengan yang ada di kode pengujian. Jadi pernyataan .toBeCalledWith() akan gagal. Sebaliknya, Anda harus menggunakan expect.any(Function).

Berikut adalah solusi pengujian unit:

Join.tsx:

import React from 'react';
import io from 'socket.io-client';

const Join = () => {
  let socket;
  const ENDPOINT = 'localhost:5000';

  const join = () => {
    socket = io(ENDPOINT);
    socket.emit('join', { name: 'Paola', room: '1' }, () => {});
  };

  return (
    <div className="join-container">
      <a className="join-button" onClick={join}>
        Sign in
      </a>
    </div>
  );
};

export default Join;

Join.test.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import io from 'socket.io-client';
import Join from './Join';

jest.mock('socket.io-client', () => {
  const mSocket = {
    emit: jest.fn(),
  };
  return jest.fn(() => mSocket);
});

describe('Join', () => {
  it('joins a chat', () => {
    const ENDPOINT = 'localhost:5000';
    const mockSocket = io(ENDPOINT);
    const joinWrapper = shallow(<Join />);
    joinWrapper.find('a').simulate('click');
    expect(mockSocket.emit).toHaveBeenCalledWith('join', { name: 'Paola', room: '1' }, expect.any(Function));
  });
});

hasil pengujian unit dengan laporan cakupan:

 PASS  src/stackoverflow/63605899/Join.test.tsx
  Join
    ✓ joins a chat (14ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |    66.67 |      100 |                   |
 Join.tsx |      100 |      100 |    66.67 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.162s, estimated 13s

kode sumber: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/63605899

person slideshowp2    schedule 07.09.2020