Morraez Posts - Answer Overflow

Morraez

•Created by Morraez on 6/14/2023 in #questions

Mocking TRPC api with Jest.mock

Im trying to mock the api to create my first test using the t3 stack. It is always undefined. here is my config ts.config

  "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }

  "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }

jest.config.mjs

const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  preset: "ts-jest",

  moduleNameMapper: {
    "^~/(.*)$": "<rootDir>/src/$1",
  },

  testEnvironment: "jest-environment-jsdom",
};

const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  preset: "ts-jest",

  moduleNameMapper: {
    "^~/(.*)$": "<rootDir>/src/$1",
  },

  testEnvironment: "jest-environment-jsdom",
};

The path to the api in the file import { api } from "~/config/api"; My test mock

// Mocking the api object
jest.mock("~/config/api", () => ({
  transactions: {
    getAllPaginated: {
      useInfiniteQuery: jest.fn().mockReturnValue({
        data: { pages: [] }, // adjust this mock data as per your requirement
      }),
    },
    getTotalByTransactionType: {
      useQuery: jest.fn().mockReturnValue({ data: 0 }), // adjust this mock data as per your requirement
    },
  },
  users: {
    getBalance: {
      useQuery: jest.fn().mockReturnValue({ data: 0 }), // adjust this mock data as per your requirement
    },
  },
}));
describe("Home", () => {
  it("renders a heading", () => {
    const mockSession = {
      expires: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
      user: {
        name: "George Harrison",
        email: "test@test.com",
        image:
          "https://i.pinimg.com/736x/8a/96/a6/8a96a66f28c23d47edcb375913114d66.jpg",
        id: "clikwonjw0006avaldxvcy43m",
      },
    }; // update this to match your session structure

    render(
      <SessionProvider session={mockSession}>
        <Home />
      </SessionProvider>
    );

    const heading = screen.getByRole("heading", {
      name: /welcome to next\.js!/i,
    });

    expect(heading).toBeInTheDocument();
  });
});

// Mocking the api object
jest.mock("~/config/api", () => ({
  transactions: {
    getAllPaginated: {
      useInfiniteQuery: jest.fn().mockReturnValue({
        data: { pages: [] }, // adjust this mock data as per your requirement
      }),
    },
    getTotalByTransactionType: {
      useQuery: jest.fn().mockReturnValue({ data: 0 }), // adjust this mock data as per your requirement
    },
  },
  users: {
    getBalance: {
      useQuery: jest.fn().mockReturnValue({ data: 0 }), // adjust this mock data as per your requirement
    },
  },
}));
describe("Home", () => {
  it("renders a heading", () => {
    const mockSession = {
      expires: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
      user: {
        name: "George Harrison",
        email: "test@test.com",
        image:
          "https://i.pinimg.com/736x/8a/96/a6/8a96a66f28c23d47edcb375913114d66.jpg",
        id: "clikwonjw0006avaldxvcy43m",
      },
    }; // update this to match your session structure

    render(
      <SessionProvider session={mockSession}>
        <Home />
      </SessionProvider>
    );

    const heading = screen.getByRole("heading", {
      name: /welcome to next\.js!/i,
    });

    expect(heading).toBeInTheDocument();
  });
});

failed test

   TypeError: Cannot read properties of undefined (reading 'transactions')
    > 25 |   const { data: txData } = api.transactions.getAllPaginated.useInfiniteQuery(

   TypeError: Cannot read properties of undefined (reading 'transactions')
    > 25 |   const { data: txData } = api.transactions.getAllPaginated.useInfiniteQuery(

2 replies

TTCTheo's Typesafe Cult

•Created by Morraez on 5/13/2023 in #questions

T3 for a chat app

Although I don't remember the exact video now. I remember Theo saying that the t3 stack would not be optimal for an application that constantly updates it's data. I assumed this meant something like a chat app that relies heavily on web sockets. If I am correct here, could someone help me understand why using t3 app is not optimal for this type of app? Also what should I use instead?

17 replies

Gaming

Programming