Typescript error with tRPC useQuery argument types in Jest test

Question

I have a monorepo which contains a React Native app. Within one of the components I have the following code:

const { data: user, refetch } = trpc.useQuery([
    "user.get",
    { id: state.user!.id },
])

// Later I use the user I receive from this query.
// Simplified for readability
bluetoothModule.addToDevices(user.devices)

The trpc value in the above code is setup like so, across several files in different workspaces:

export const appRouter = createRouter()
    .transformer(superjson)
    .merge("user.", userRouter)
    // Various other routers...

export type AppRouter = typeof appRouter

export const trpc = createReactQueryHooks<AppRouter>()

This works fine in the actual app. However, I've now started adding a test which uses react-native-testing-library to test this component.

describe("Sensor Status page", () => {
    it("shows sensors correctly", async () => {
        render(
            <SensorStatus
                // Some unrelated props here
            />
        )
    })
})

When this test runs, I get the following error:

Type '{ id: string; }' is not assignable to type '"status" | "user.get" | "auth.authenticate" | "event.overview" | "event.temp" | "event.pressure" | "event.movement" | "event.all" | "user.all" | "device.get"'.
      Type '{ id: string; }' is not assignable to type '"device.get"'.

I also get this additional error, when I try to use the user.devices value.

Property 'devices' does not exist on type 'string | AuthResponse | OverviewResults | GetAllUsersResponse[] | Device | (User & { devices: Device[]; }) | { ...; }[] | { ...; }[] | { ...; }[] | { ...; }'.
      Property 'devices' does not exist on type 'string'.

With some more investigation, I found that it's expecting the following type for the useQuery function.

[
    any,
    "status" | "user.get" | "auth.authenticate" | "event.overview" | "event.temp" | "event.pressure" | "event.movement" | "event.all" | "user.all" | "device.get",
    any,
    [...?]
]

I've tried mocking tRPC, but this doesn't seem to affect affect the TypeScript compilation.

If I add ts-ignore comments to the component, the test will run fine. However, I'd rather not degrade the app code for the sake of a test. Does anyone know why Typescript is expecting a different type within the test, or know if a cleaner way to fix this?

Typescript error with tRPC useQuery argument types in Jest test

0 Answers0