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
failed test
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
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",
};
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: "[email protected]",
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: "[email protected]",
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();
});
});
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(
0 Replies