SignalR client issues "Failed to complete negotiation with the server: TypeError: fetch failed" error message in a node application

Question

We have an Azure Function App running on our development machine (http://locahost:7071/api) with negotiate endpoint pointing to an Azure Serverless signalR instance. The function app has the following configuration:

    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*"
    }

The typescript application's implementation to negotiate looks in a Promise<boolean> function like the following code snippet:

const options: IHttpConnectionOptions = {
                accessTokenFactory: () => '',
                logger: this.logger,
                logMessageContent: true,
                headers: { 
                    'x-ms-signalr-userid' : 'myuserid',
                    'x-functions-key' : 'myfunckey'
                }
            }; 
this.hubConnection = new signalR.HubConnectionBuilder()
          .withUrl(`http://localhost:7071/api`, options)
          .configureLogging(LogLevel.Information)
          .withAutomaticReconnect()
          .build();

this.hubConnection.start().then(() => {
     this.logger?.log(LogLevel.Information, "Hub connection established.");
     resolve(true);
    })
    .catch(error => {
        this.logger?.log(LogLevel.Critical, `Unable to establish a connection to the hub. The start failed: ${error}`);
        reject(false);
   });

  "dependencies": {
    "@microsoft/signalr": "^7.0.5",
    "rxjs": "^7.8.0",
    "typescript": "~4.9.5"
  }

Unfortunately this code running in Jest never "negotiates" successfully due to the following error message:

Failed to complete negotiation with the server: TypeError: fetch failed

Additional notes: The breakpoint never hits the Azure Function Function's negotiate endpoint (in C#) when running the function app in debug mode.

As a side note, we also have a test .NET application that negotiates flawlessly whose negotiation routine is similar to the share code's implementation.

How to address this issue in this code snippet to make the negotiation work?

score 0 · Answer 1 · answered Jul 10 '23 at 20:06

Jest is not a browser environment and as such doesn't have fetch defined. Ideally, unit tests shouldn't be making actual calls and instead should mock requests.

But nonetheless, it isn't impossible to do. Importing isomorphic-fetch at the top of file where you have your tests should do the trick I believe.

SignalR client issues "Failed to complete negotiation with the server: TypeError: fetch failed" error message in a node application

1 Answers1