👋 Welcome to pusher-js-mock

Mock Pusher.js in your JavaScript tests with ease.

Installing ⏬

Using yarn:

yarn add --dev pusher-js-mock

Or using npm:

npm install -D pusher-js-mock

Usage 🛠

• Emitting an event 📶
• Listening for an event 👂
• Emitting an event from connection 📶
• Listening for an event from connection 👂
• Stubbing Pusher when imported from pusher-js package 📦
• Stubbing Pusher when used as a global variable 🌍
• Mocking presence channels
  • Using custom authorizer
  • Pusher events emitted by presence channels
• Using with Vitest

For more detailed examples, check out examples directory inside the project!

Also, you can check out the Docs for even more information.

Emitting an event 📶

If you need to mock a Pusher object in your tests that can subscribe to channel, it's best to use PusherMock.

1import { PusherMock } from "pusher-js-mock";
2
3// initializing PusherMock
4const pusher = new PusherMock();
5
6// subscribing to a Pusher channel
7const channel = pusher.subscribe("my-channel");
8
9// emitting an event
10channel.emit("event-name");

Listening for an event 👂

If you want to check whether your callback is getting called properly, you can bind a callback to your channel, and then emit an event.

1import { PusherMock } from "pusher-js-mock";
2
3describe("listening for an event", () => {
4  // initializing PusherMock
5  const pusher = new PusherMock();
6
7  // subscribing to a Pusher channel
8  const channel = pusher.subscribe("my-channel");
9
10  // define and attach a listener
11  const listener = jest.fn();
12  channel.bind("event-name", listener);
13
14  // emitting an event
15  channel.emit("event-name");
16
17  // Expect listener to have been called
18  expect(listener).toHaveBeenCalled();
19});

Emitting an event from connection 📶

The connection within pusher is mocked and can be used much like a channel channel. There's no need to subscribe to subscription as it's subscribed by default on pusher.

1import { PusherMock } from "pusher-js-mock";
2
3// initializing PusherMock
4const pusher = new PusherMock();
5
6// emitting connection event
7pusher.connection.emit("event-name");

Listening for an event from connection 👂

As with channels, you can also listen to connection for events.

1import { PusherMock } from "pusher-js-mock";
2
3describe("listening for an event", () => {
4  // initializing PusherMock
5  const pusher = new PusherMock();
6
7  // define and attach a listener
8  const listener = jest.fn();
9  pusher.connection.bind("event-name", listener);
10
11  // emitting an event
12  pusher.connection.emit("event-name");
13
14  // Expect listener to have been called
15  expect(listener).toHaveBeenCalled();
16});

Stubbing Pusher when imported from pusher-js package 📦

If you're using Pusher in your code in this or similar manner:

1import Pusher from "pusher-js";

You will need to mock Pusher in a specific way.

I suggest you use Jest to test your code. To do this in Jest, you'll need something like this:

1jest.mock("pusher-js", () => {
2  const Pusher = require("pusher-js-mock").PusherMock;
3  return Pusher;
4});

If you have tips on how to mock this using other testing frameworks, please submit an issue or a pull request.

Stubbing Pusher when used as a global variable 🌍

This shows how to stub a pusher if you're attaching it to window object in your project. If you're attaching a PusherFactory to a window object like this in your code:

1window.PusherFactory = {
2  pusherClient: function(pusherKey) {
3    return new Pusher(pusherKey);
4  }
5};

It's best for you to use PusherFactoryMock.

1import { PusherFactoryMock } from "pusher-js-mock";
2
3// initialize instance of PusherFactoryMock
4const pusherFactoryMock = new PusherFactoryMock();
5// replace it with the object that is attached to a window
6window.PusherFactory = pusherFactoryMock;
7
8// get the Pusher client reference
9pusher = pusherFactoryMock.pusherClient();

This way you'll just replace your PusherFactory with PusherFactoryMock.

Mocking presence channels

This package also supports using presence channels for multiple clients. The mock will automatically detect when presence- is in the channel name and return a presence channel with channel.members filled out as expected. You can pass in IDs and info via a custom authorizer, just as you would with the real package.

Using custom authorizer

If you want, you can pass in a custom authorizer when creating a Pusher client.

1// create-client.js
2import Pusher from "pusher-js";
3import { getAuthSomehow } from "./getAuthSomehow";
4
5export const createClient = ({ id, info }) =>
6  new Pusher("APP_KEY", {
7    cluster: "APP_CLUSTER",
8    // see https://github.com/pusher/pusher-js#authorizer-function
9    authorizer: ({ name }) => ({
10      authorize: (socketId, callback) => {
11        const auth = getAuthSomehow(id, info);
12        callback(false, auth);
13      }
14    })
15  });
16
17export default createClient;

1// create-client.spec.js
2import createClient from "../create-client";
3
4// mock the authorize function and pusher
5jest.mock("pusher-js", () => require("pusher-js-mock"));
6jest.mock("../getAuthSomehow", () => ({
7  getAuthSomehow: (id, info) => ({ id, info })
8}));
9
10it("should create a presence channel", async () => {
11  // arrange: create pusher client
12  const pusher = createClient({ id: "my-id", info: { role: "moderator" } });
13
14  // act: required to ensure pusher events are called, i.e. pusher:member_added
15  const presenceChannel = await pusher.subscribe("presence-channel");
16
17  // assert: presenceChannel has the properties we expect it to.
18  expect(presenceChannel.members.myID).toBe("my-id");
19  expect(presenceChannel.members.me).toEqual({
20    id: "my-id",
21    info: { role: "moderator" }
22  });
23  expect(presenceChannel.members.members).toEqual({
24    "my-id": { role: "moderator" }
25  });
26});

Check out a code example of using presence channels

Pusher events emitted by presence channels

The mocked Pusher instance will also emit pusher internal events pusher:subscription_succeeded, pusher:member_added and pusher:member_removed to the relevant clients:

1it("should emit presence-channel events", async () => {
2  const client = createClient({ id: "my-id" });
3  const channel = client.subscribe("presence-channel");
4  const listener = jest.fn();
5
6  /**
7   * On bind, pusher:subscription_succeded will trigger
8   * for the client subscribing. Other clients will be
9   * notified via pusher:member_added as below.
10   */
11  await channel.bind("pusher:subscription_succeeded", listener);
12  expect(listener).toHaveBeenCalledTimes(1);
13
14  /**
15   * Create and subscribe a new client that will trigger the
16   * pusher:member_added event. This only gets triggered for
17   * clients are not the client subscribing
18   */
19  channel.bind("pusher:member_added", listener);
20  const otherClient = createClient({ id: "your-id" });
21  await otherClient.subscribe("presence-channel");
22  expect(listener).toHaveBeenCalledTimes(2);
23
24  /**
25   * Unsubscribe the otherClient to trigger pusher:member_removed.
26   * This only gets triggered for clients that are not the client
27   * unsubscribing.
28   */
29  channel.bind("pusher:member_removed", listener);
30  await otherClient.unsubscribe("presence-channel");
31  expect(listener).toHaveBeenCalledTimes(3);
32});

Using with Vitest

You can mock Pusher.js in Vitest environment like this:

1vi.mock("pusher-js", () => {
2  return {
3    __esModule: true,
4    default: require("pusher-js-mock").PusherMock
5  };
6});

Code of Conduct

Contributing

Credits

Photo by Octavian Rosca on Unsplash