I tried to write a test for this switch:

import { rest } from "msw"
import { server } from "testHelpers/server"
import { render } from "testHelpers/renderHelpers"
import { TokensPage } from "./TokensPage"
import { AuthorizationResponse } from "api/typesGenerated"
import { renderHook, waitFor, screen } from "@testing-library/react"
import { useCheckTokenPermissions } from "./hooks"

describe("TokensPage", () => {
  it("shows a toggle switch if user has read all permissions", async () => {
    const MockReadAllTokenPermissions: AuthorizationResponse = {
      readAllApiKeys: true,
    }

    server.use(
      rest.get("/api/v2/authcheck", (req, res, ctx) => {
        return res(ctx.status(200), ctx.json(MockReadAllTokenPermissions))
      }),
    )

    const { container } = render(<TokensPage />)

    const { result } = renderHook(() => useCheckTokenPermissions(), {
      container,
    })

    await waitFor(() => expect(result.current.isSuccess).toBe(true))
    expect(result.current.data).toEqual(MockReadAllTokenPermissions)

    // https://v4.mui.com/components/switches/#accessibility
    await screen.findByRole("checkbox")
  })
})

But I keep getting this error:

I believe QueryClient should be set in the render function, which wraps the <TokensPage /> component in AppProviders. @BrunoQuaresma any idea where I'm going astray?

I tried to write a test for this switch:

import { rest } from "msw"
import { server } from "testHelpers/server"
import { render } from "testHelpers/renderHelpers"
import { TokensPage } from "./TokensPage"
import { AuthorizationResponse } from "api/typesGenerated"
import { renderHook, waitFor, screen } from "@testing-library/react"
import { useCheckTokenPermissions } from "./hooks"

describe("TokensPage", () => {
  it("shows a toggle switch if user has read all permissions", async () => {
    const MockReadAllTokenPermissions: AuthorizationResponse = {
      readAllApiKeys: true,
    }

    server.use(
      rest.get("/api/v2/authcheck", (req, res, ctx) => {
        return res(ctx.status(200), ctx.json(MockReadAllTokenPermissions))
      }),
    )

    const { container } = render(<TokensPage />)

    const { result } = renderHook(() => useCheckTokenPermissions(), {
      container,
    })

    await waitFor(() => expect(result.current.isSuccess).toBe(true))
    expect(result.current.data).toEqual(MockReadAllTokenPermissions)

    // https://v4.mui.com/components/switches/#accessibility
    await screen.findByRole("checkbox")
  })
})

But I keep getting this error:

I believe QueryClient should be set in the render function, which wraps the <TokensPage /> component in AppProviders. @BrunoQuaresma any idea where I'm going astray?

If it is in the authenticated route, I would use renderWithAuth. But if the render helper has the query client, it should work... maybe we are missing something

maybe we are missing something

I did try renderWithAuth with no luck. I have tried posting on their Discord and we'll see how they respond.

Oops, I meant to click request changes, but feel free to re-tag me if you need!