How can I mock SignalR only for SOME Cypress tests?

[dstj]

I have end-to-end Cypress tests that actually use the full backend with the real SignalR connection. Using your standard initialization like this:

const cypressSignalRMock = (useCypressSignalRMock('hubMock') as unknown) as signalR.HubConnection;
this.hubConnection = cypressSignalRMock || new signalR.HubConnectionBuilder()
	.withUrl(url, { accessTokenFactory })
...

always result in the mock being created as long as Cypress is running. This is because of these lines, correct?

How can I control the mock creation from each individual Cypress test so that it's the test that decides if SignalR is mocked or not?

That way, I could do something like this is my app code:

this.hubConnection = window['cypress-signalr-mock'] || new signalR.HubConnectionBuilder()
	.withUrl(url, { accessTokenFactory })
...

That would also remove the app's dependency on `Cypress-SignalR-Mock`, which is also something that I would like to avoid having.

[JasonLandbridge]

Hey there!

That would be a nice feature idea!

Using this example from the README:

const hubConnection = useCypressSignalRMock('testHub') ?? 
new HubConnectionBuilder().withUrl(`http://localhost:3000/testhub`).build();

you could do something like this in the test:

Cypress.env('ENABLE_SIGNALR_MOCK', true);

Then where you define the connection:

const hubConnection = Cypress.env('ENABLE_SIGNALR_MOCK') ? useCypressSignalRMock('testHub') : 
new HubConnectionBuilder().withUrl(`http://localhost:3000/testhub`).build()

This should work but is a bit messy, I will think about a way to implement this natively in the plugin.

That would also remove the app's dependency on Cypress-SignalR-Mock, which is also something that I would like to avoid having.

Why would you want to remove the dependency?

[dstj]

Thanks for the quick response. I'll try that, but I agree, it is a bit messy ;)

Why would you want to remove the dependency?

My Cypress project and app are two distinct projects. Having Cypress dependencies in both feels wrong. Shouldn't production code try to minimize the test library dependencies. This will reduce the bundle size, etc. By the way, the doc says --save-dev, but the playground example has it as a full-fledged dependency) make it's way into production?

I'm not the tree shaking expert, but doesn't having a useCypressSignalRMock call right in the production code automatically makes that not a dev dependency?

[JasonLandbridge]

My Cypress project and app are two distinct projects. Having Cypress dependencies in both feels wrong. Shouldn't production code try to minimize the test library dependencies. This will reduce the bundle size, etc.

Yeah that is a good point.

By the way, the doc says --save-dev, but the playground example has it as a full-fledged dependency) make it's way into production?

I'm not the tree shaking expert, but doesn't having a useCypressSignalRMock call right in the production code automatically makes that not a dev dependency?

Hmmm, I'm honestly not sure... If you find out then let me know cause that shouldn't happen

[dstj]

Hmmm, I'm honestly not sure... If you find out then let me know cause that shouldn't happen

A bit late, but here are my findings with webpack bundle analyzer. If you use a dev dependency in "production" code, it will be included in the final bundle. So I think the currently proposed integration is a problem because it forces test code into production code.

[JasonLandbridge]

I'm not the tree shaking expert, but doesn't having a useCypressSignalRMock call right in the production code automatically makes that not a dev dependency?

Yeah, thinking about it more, this is unavoidable and would always result in it being bundled since you have to call this directly from the production code as you mentioned. IT could be decoupled by injecting the plugin into window and from the production code check if there is anything in window and if so call that.