Estoy tratando de descubrir cómo escribir una aplicación Typescript/React que usa socket.io para comunicarse con un servidor y, por lo tanto, con otros clientes. Sin embargo, me gustaría escribir algunas pruebas al hacerlo.
En mi aplicación de muestra tengo:
import io, { Socket } from 'socket.io-client'; const App = () => { let socket: Socket; const ENDPOINT = 'localhost:5000'; const join = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => { event.preventDefault(); socket = io(ENDPOINT); socket.emit('join', { name: 'Paola', room: '1' }, () => {}); }; return ( <div className="join-container"> <button className="join-button" onClick={join} data-testid={'join-button'}> Sign in </button> </div> ); }; export default App;Y mi prueba se parece a:
import App from './App'; import { render, screen, fireEvent } from '@testing-library/react'; import 'setimmediate'; describe('Join', () => { let mockEmitter = jest.fn(); beforeEach(() => { jest.mock('socket.io-client', () => { const mockedSocket = { emit: mockEmitter, on: jest.fn((event: string, callback: Function) => {}), }; return jest.fn(() => { return mockedSocket; } ); }); }); afterEach(() => { jest.clearAllMocks(); }); it('joins a chat', () => { // Arrange render(<App />); const btn = screen.getByTestId('join-button'); // Act fireEvent.click(btn); // Assert expect(btn).toBeInTheDocument(); expect(mockEmitter).toHaveBeenCalled(); }); });Solo quiero asegurarme de que puedo simular socket.io-client para poder verificar que los mensajes se envían al cliente y que (más tarde) reacciona a los mensajes enviados.
Sin embargo, la prueba está fallando y no parece estar usando mi simulacro.
Error: expect(jest.fn()).toHaveBeenCalled() Expected number of calls: >= 1 Received number of calls: 0En el documento manual-mocks#examples , hay una nota:
Nota: para simular correctamente, Jest necesita
jest.mock('moduleName')esté en el mismo ámbito que la instrucciónrequire/import.
Entonces, hay dos soluciones:
app.tsx :
import React from 'react'; import io, { Socket } from 'socket.io-client'; const App = () => { let socket: Socket; const ENDPOINT = 'localhost:5000'; const join = (event: React.MouseEvent<HTMLButtonElement>) => { event.preventDefault(); socket = io(ENDPOINT); socket.emit('join', { name: 'Paola', room: '1' }, () => {}); }; return ( <div className="join-container"> <button className="join-button" onClick={join} data-testid={'join-button'}> Sign in </button> </div> ); }; export default App; Opción 1: llame jest.mock e importe el módulo ./app en el alcance del módulo del archivo de prueba.
app.test.tsx :
import App from './App'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import React from 'react'; let mockEmitter = jest.fn(); jest.mock('socket.io-client', () => { return jest.fn(() => ({ emit: mockEmitter, on: jest.fn(), })); }); describe('Join', () => { afterEach(() => { jest.clearAllMocks(); }); it('joins a chat', () => { // Arrange render(<App />); const btn = screen.getByTestId('join-button'); // Act fireEvent.click(btn); // Assert expect(btn).toBeInTheDocument(); expect(mockEmitter).toHaveBeenCalled(); }); }); Opción 2: Ya que llamas a jest.mock en beforeEach hook, require el módulo './app' en el alcance de la función beforeEach hook también.
app.test.tsx :
import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import React from 'react'; describe('Join', () => { let mockEmitter = jest.fn(); let App; beforeEach(() => { App = require('./app').default; jest.mock('socket.io-client', () => { const mockedSocket = { emit: mockEmitter, on: jest.fn(), }; return jest.fn(() => mockedSocket); }); }); afterEach(() => { jest.clearAllMocks(); }); it('joins a chat', () => { // Arrange render(<App />); const btn = screen.getByTestId('join-button'); // Act fireEvent.click(btn); // Assert expect(btn).toBeInTheDocument(); expect(fakeEmitter).toHaveBeenCalled(); }); });versión del paquete:
"jest": "^26.6.3", "ts-jest": "^26.4.4" jest.config.js :
module.exports = { preset: 'ts-jest/presets/js-with-ts', testEnvironment: 'jsdom' }