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•2y 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•2y ago

Message Not Public

goofygoober•2y 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•16mo ago

Yes, can you please provide an example of this?

Gaming

Programming

Issue with useMutation() when trying to test React component