Table of Contents

1. Install
2. Introduction
3. Get started
4. Usage

Install with npm:

npm install --save-dev cypress-plugin-signalr

Install with yarn:

yarn add cypress-plugin-signalr --dev

cypress-plugin-signalr is a plugin for cypress that provides a mock for the SignalR hub connection and adds cypress commands to publish (hubPublish) and/or verify (hubVerify) actions from and to your SignalR hub.

After installing the package include an import in the cypress/support/index.js file, like:

import "cypress-plugin-signalr";

The plugin exposes the SignalRMock on the global object as 'signalrMock'; You can decide for yourself how to use this object in your app but in most cases you probably want to pass it to your application, for example on the window object, like:

Cypress.Commands.overwrite("visit", (originalFn, url) => {
  return originalFn(url, {
    onBeforeLoad(window) {
      window.signalrMock = signalrMock;
    },
  });
});

In your app you have to take this object and use it when defined, like:

const connection =
  window.signalrMock ||
  new signalR.HubConnectionBuilder().withUrl(hubUrl).build();

Within cypress you now have three new commands:

1. hubPublish This command publishes the specified action with the specified attribute, like:

it("should publish an action", () => {
  cy.hubPublish("notification:receive", "My notification");
});

This will execute the code in registered subscribers, like:

connection.on("notification:receive", (message) => {
  console.log(message); // logs: 'My notification'
});

2. hubVerify This command verifies that a specific message is invoked, like:

it("should invoke an action", () => {
  cy.hubVerify("DeleteNotification", 1, (invokes) => {
    expect(invokes[0].args[0]).to.equal(123);
  });
});

As you can see it provides you with the invocations occurred for this action. An action is invoked with SignalR like:

connection.invoke("DeleteNotification", 123);

3. hubClear This command clears the current state of the mock. this is most likely used to clear invocations between tests. You can call this command after each test, like:

afterEach(() => {
  cy.hubClear();
});

Optionally you can specify whether you want to clear both the invokes as the subscribers, like:

afterEach(() => {
  cy.hubClear({
    subscribers: false,
    invokes: true, // default
  });
});