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
jest.config.mjs
The path to the api in the file
My test mock
failed test
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";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(