Closing/clearing mock socket between tests - websocket

Question

I'm using mock-socket to mock websockets calls.
I've got a test working but it only works for one test, then it says that the mock server is already listening on that url:
describe('mock socket method 1', () => {
let mockSocket;
let mockServer;
beforeEach(() => {
cy.visit('/', {
onBeforeLoad(win: Window): void {
// #ts-ignore
cy.stub(win, 'WebSocket', url => {
mockServer = new Server(url).on('connection', socket => {
console.log('mock socket connected');
mockSocket = socket;
});
if (!mockServer) return new WebSocket(url);
});
},
});
});
afterEach(() => {
mockSocket.close()
});
it('gets a message', () => {
const object = _createSettingsApiPutPayload(defaultSettingsState)
mockSocket.send(JSON.stringify(object));
cy.contains('Motion threshold')
});
it('gets a message', () => {
const object = _createSettingsApiPutPayload(defaultSettingsState)
mockSocket.send(JSON.stringify(object));
cy.contains('Motion threshold')
});
});
If I change the method to before() instead of beforeEach it works, but then I don't get a fresh environment for each test. I tried mockSocket.close() in afterEach() as you can see, but that doesn't work. I've tried cy.reload() but that gives a CORS error!
The error appears to be thrown at
> 15 | ReactDOM.render(
16 | <AppWrapper/>,
17 | document.getElementById('root'),
18 | );
AppWrapper is a AppContainer wrapped in redux's Provider, AppContainer connects App to redux, and here's App:
class App extends Component<AppProps> {
settingsSubscription: W3CWebSocket;
componentDidMount(): void {
// subscribe to websockets
this.settingsSubscription = this.subscribeToSettings(urls.SETTINGS_WS);
}
/**
* Sets up the websockets subscription to the settings.
* #param url the url of the websocket server
* #return the subscription object
*/
subscribeToSettings(url: string): W3CWebSocket {
let settingsSubscription = new W3CWebSocket(url);
settingsSubscription.onopen = () => console.log('WebSocket Client Connected (settings)');
settingsSubscription.onclose = () => console.log('WebSocket Client Disconnected (settings)');
settingsSubscription.onmessage = (message: MessageEvent) => this.handleSettingsMessage(message);
return settingsSubscription;
}
...
}

Answer 1

In the documentation they use mockServer.stop() to stop the mockServer instead of closing the mockSocket. That's what I am doing and most probably what you need as well.
Here's the snippet I am referring to:
// NOTE: this timeout is for creating another micro task that will happen after the above one
setTimeout(() => {
t.is(app.messages.length, 1);
t.is(app.messages[0], 'test message from mock server', 'we have subbed our websocket backend');
mockServer.stop(t.done);
}, 100);
Here's the link to the repo:
https://github.com/thoov/mock-socket/