Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
10 replies
jesse

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


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>
...


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 😕
Was this page helpful?