MockStreamApp.ts

import { connect, UR } from "getstream";
import React, { ReactNode } from "react";
import {
  DefaultAT,
  DefaultUT,
  FeedManager,
  FeedProps,
  SharedFeedManagers,
  StreamAppProvider
} from "react-activity-feed";

export const MockStreamApp = ({
  feedGroup = "timeline",
  post = jest.fn(),
  get = jest.fn(),
  children
}: {
  feedGroup?: string;
  children: ReactNode;
  post?: any;
  get?: any;
}) => {
  const analyticsClient = null;
  const errorHandler = () => {};

  const userData: DefaultUT = {
    id: "example-user",
    name: "Example User",
    profileImage: "http://example.com"
  };

  const client = connect<DefaultUT, DefaultAT, UR, UR, UR, UR>(
    "api_key",
    // Sample user token, decode token at https://jwt.io
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HtRqrqdbDQ0wuOKak-cV45UD6_wHf7FnG4IqQ4X6gsM",
    "app_id"
  );

  // Overwrite post/get methods with mock function.
  client.post = post;
  client.get = get;

  const manager = new FeedManager<DefaultUT, DefaultAT, UR, UR, UR, UR>({
    client,
    analyticsClient,
    errorHandler,
    feedGroup,
    user: client.currentUser,
    userId: "example-user"
  });

  const sharedFeedManagers: SharedFeedManagers = {
    [manager.feed().id]: manager
  };

  const user = client.currentUser;

  return (
    <StreamAppProvider
      value={{
        client,
        analyticsClient,
        errorHandler,
        userData,
        user,
        sharedFeedManagers
      }}
    >
      {children}
    </StreamAppProvider>
  );
};

Page.test.tsx

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { DefaultAT, DefaultUT, FeedManager } from "react-activity-feed";
import { connect, StreamClient, UR } from "getstream";
import userEvent from "@testing-library/user-event";
import Page from "./pages/activity/program";
import { MockStreamApp } from "./MockStreamApp.ts";

it("adds a activity to a feed", async () => {
  const mockFnSubmit = jest.fn();
  const mockFnPost = jest.fn();

  await render(
    <MockStreamApp post={mockFnPost}>
      <Page onStatusSubmit={mockFnSubmit} />
    </MockStreamApp>
  );

  // Perform form update & submit.
  await waitFor(() => userEvent.click(inputSubmit));

  // Assert mocked post request.
  expect(mockFnPost).toBeCalledWith({
    url: "feed/user/example-user/",
    body: {
      actor: "user:example-user",
      object: "program:example-program",
      verb: "add",
      text: "An example activity",
      foreign_id: "program:example-program",
      to: ["program:example-program"]
    },
    // Sample user token, decode token at https://jwt.io
    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HtRqrqdbDQ0wuOKak-cV45UD6_wHf7FnG4IqQ4X6gsM"
  });
});

Page.tsx

const Page = () => {
  const { client, analyticsClient, errorHandler, user } = useStreamContext<
    DefaultUT,
    ActivityProgram
  >();

  const handleSubmit = async (values: any) => {
    if (!user || !client || !values.text || !values.program) return;

    const programId = values.program;

    const feedManager = new FeedManager<DefaultUT, ActivityProgram>({
      client,
      analyticsClient,
      errorHandler,
      feedGroup: "user",
      user: client.currentUser
    });

    await feedManager.feed().addActivity({
      actor: "user:" + user.id,
      object: "program:" + programId,
      verb: "add",
      text: values.text,
      foreign_id: "program:" + programId,
      to: ["program:" + programId]
    });
  };

  // Render logic.
  return ...
};