Morraez
Morraez
PostsComments
TTCTheo's Typesafe Cult
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",
        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",
        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