Ability to circumvent blitzjs rpc during jest tests.

[uptickmetachu]

What do you want and why?

I want to be able to run full stack jest tests that bypass the RPC layer without using cypress. The jest test should be able to ignore the RPC layer and talk directly to the backend.

The main benefit is we would be able to do end to end tests without using cypress. Other benefits include:

• wrapping end-to-end tests in a transaction and rolling back changes (much faster than db resets)
• releveraging backend test scenarios or model factories (easier to set up e2e tests)
• testing for behaviour without relying on mocks

Possible implementation(s)

Either modify the RPC layer to behave differently during jest tests (to avoid calling fetch) or have the query functions eg: getCurrentUser be evoked directly.

Additional context

Currently, from a fresh skeleton app:

I've modified app/pages/index.test.tsx to look like this (removed the mocks).

import { render } from "test/utils"

import db from "db"
import Home from "./index"
import { useCurrentUser } from "app/core/hooks/useCurrentUser"

describe("test useCurrentUser works in a front end test", () => {
  it('does something', async() => {
    const { getByText } = render(
      <Home />
    )
  })
})

This component uses a Query to get the current user.

The error I get is:

  ● renders blitz documentation link › does something

    TypeError: Cannot read property 'apiUrl' of undefined

      3 |
      4 | export const useCurrentUser = () => {
    > 5 |   const [user] = useQuery(getCurrentUser, null)
        |                  ^
      6 |   return user
      7 | }
      8 |

Have had a discussion with @flybayer regarding this feature request in https://github.com/blitz-js/blitz/discussions/2433#discussioncomment-826765

[flybayer]

Thanks @uptickmetachu, I think we can make it work.

For whoever wants to work on this, we need to modify the useQuery hooks to work "server-side" with a regular function when Boolean(process.env.JEST_WORKER_ID) === true

[Talor-A]

is this check already in place? https://github.com/blitz-js/blitz/blob/1ed6dd1d39d7f9f70aeda9480b204ce24a47a548/nextjs/packages/next/data-client/react-query-utils.ts#L82

[flybayer]

@Talor-A no, that function just doesn't display an error in test environment.

The use query hooks still need modified to enable this.

[Talor-A]

Happy Hacktoberfest! Hoping to pick this one up - can I be assigned here?

[Talor-A]

and should this be opt-in behavior, or replace the default? since the default behavior now is to throw an error for any RPC call in a test environment, I imagine replacing the default would be a sensible option for simplicity's sake.

[flybayer]

@Talor-A hey so sorry I forgot to reply here.

I'm really not sure if it should be default or not. Pros and cons each way 🤔

[Talor-A]

I spent some time hacking on this, but unfortunately I didn't make much progress :( I'll unassign myself and maybe someone else can pick this up.