Issue with useMutation() when trying to test React component

Hi, I am having issues with my test failing since it cannot render the component properly because of this error:
TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
❯ Object.useMutation$1 [as useMutation] node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:372:17
❯ node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:50:34
❯ Object.apply node_modules/@trpc/server/dist/index-972002da.mjs:18:20
❯ SignUp src/pages/signup.tsx:14:43
12|
13| const SignUp: NextPage = () => {
14| const userMutation = api.user.createUser.useMutation();
| ^
15| const router = useRouter();
16|
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16305:18
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20074:13
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21587:16
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27426:14
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26560:12
❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26466:5
TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
❯ Object.useMutation$1 [as useMutation] node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:372:17
❯ node_modules/@trpc/react-query/dist/createHooksInternal-416876ed.mjs:50:34
❯ Object.apply node_modules/@trpc/server/dist/index-972002da.mjs:18:20
❯ SignUp src/pages/signup.tsx:14:43
12|
13| const SignUp: NextPage = () => {
14| const userMutation = api.user.createUser.useMutation();
| ^
15| const router = useRouter();
16|
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16305:18
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20074:13
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21587:16
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27426:14
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26560:12
❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26466:5
Component:
import { type NextPage } from "next";
import { api } from "../utils/api";
import { useRouter } from "next/router";

interface UserCreationInput {
firstName: string;
lastName: string;
username: string;
password: string;
email: string;
}

const SignUp: NextPage = () => {
const userMutation = api.user.createUser.useMutation();
const router = useRouter();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const firstName = (
document.getElementById("firstName") as HTMLInputElement
).value;
const lastName = (
document.getElementById("lastName") as HTMLInputElement
).value;
const username = (
document.getElementById("username") as HTMLInputElement
).value;
const password = (
document.getElementById("password") as HTMLInputElement
).value;
const email = (document.getElementById("email") as HTMLInputElement)
.value;

if (!firstName || !lastName || !username || !password || !email) {
alert("Please fill out all fields");
return;
}

const input: UserCreationInput = {
firstName,
lastName,
username,
password,
email,
};

const res = createUser(input);
e.preventDefault();
await router.push("/");
};

const createUser = (input: UserCreationInput) => {
userMutation.mutate(input);
};

return (
<>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#749a7e] to-[#acafe8]">
<div className="flex flex-col items-center justify-center gap-4">
<p className="text-center text-2xl text-white">Sign Up</p>
...
import { type NextPage } from "next";
import { api } from "../utils/api";
import { useRouter } from "next/router";

interface UserCreationInput {
firstName: string;
lastName: string;
username: string;
password: string;
email: string;
}

const SignUp: NextPage = () => {
const userMutation = api.user.createUser.useMutation();
const router = useRouter();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const firstName = (
document.getElementById("firstName") as HTMLInputElement
).value;
const lastName = (
document.getElementById("lastName") as HTMLInputElement
).value;
const username = (
document.getElementById("username") as HTMLInputElement
).value;
const password = (
document.getElementById("password") as HTMLInputElement
).value;
const email = (document.getElementById("email") as HTMLInputElement)
.value;

if (!firstName || !lastName || !username || !password || !email) {
alert("Please fill out all fields");
return;
}

const input: UserCreationInput = {
firstName,
lastName,
username,
password,
email,
};

const res = createUser(input);
e.preventDefault();
await router.push("/");
};

const createUser = (input: UserCreationInput) => {
userMutation.mutate(input);
};

return (
<>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#749a7e] to-[#acafe8]">
<div className="flex flex-col items-center justify-center gap-4">
<p className="text-center text-2xl text-white">Sign Up</p>
...
If someone has also set up testing with vitest in their project, I would also be down to just start from the beginning with you. I have been trying to get this to render all day 😕
4 Replies
Tom
Tom2y ago
dont have a ton of xp here but im guessing that the problem is that vitest is not running your compoent thru next and trpc requires this thing in _app.tsx
export default trpc.withTRPC(MyApp);
export default trpc.withTRPC(MyApp);
also fun fact. if you start your code with: uhh hard to write but 3 backticks + 'ts' then you get syntax highlighting in discord
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
goofygoober
goofygoober17mo ago
Hey @zeztron probably a long shot since it's been so long since you posted this. Can you share an example of what you are talking about here?
Anthony
Anthony16mo ago
Yes, can you please provide an example of this?
Want results from more Discord servers?
Add your server