Full stack automated tests

[RobertBroersma]

Hey folks, I've been thinking about how to test my apps, and I could use some input/ideas. I've boiled it down to

1. e2e tests -- Run the entire stack and use Cypress or Playwright or something to run tests over it.
2. Other tests -- Unit tests, component tests, whatever!

In the case of #2 I usually mock the API using something like MockServiceWorker, but I figured hey, I control the entire stack, why would I mock my BE, that'd only give me extra stuff to maintain! But running those tests including the backend... that's just e2e tests, no?

I feel like there could be some middle ground where those tests bypass all the API layer stuff (like development with blitz!), and just call those backend functions (Jest runs in node anyway) right there from the test, so I don't need to go and launch my entire app before the test. This bypasses the need to create mocks and delivers free type safety as well if I just use prisma client to create "mock" data!

Database could be an obstacle. Postgres doesn't have an in-memory version.

Thoughts? 😄

[RobertBroersma]

Turns out this just works?!

I created these files in examples/auth

// app/pages/data.tsx

import getData from "app/users/queries/getData"
import {BlitzPage, useQuery} from "blitz"

const Data: BlitzPage = () => {
  let [data] = useQuery(getData, undefined)
  return (
    <div>
      {data?.map((project) => (
        <p key={project.id}>{project.name}</p>
      ))}
    </div>
  )
}

Data.suppressFirstRenderFlicker = true

export default Data

// users/queries/getData.tsx

import db from "db"

export default async function getData() {
 return await db.project.findMany()
}

// pages/data.test.tsx

import db from "db"
import {render} from "test/utils"
import Data from "./data"

test("renders", async () => {
  await db.project.create({
    data: {
      name: "Test",
    },
  })

  const {findAllByText} = render(<Data />)
  await findAllByText(/Test/i)
})

And it works and the test passes
I am amazed. Was this intentional? This is awesome!

The database issue remains, there would need to be some cleanup or isolation, but that's details!

[beerose]

Oh, so I think I misunderstood your original question! I thought that by bypass all the API layer stuff you meant skipping the RPC codegen stuff. But yeah, this just work, and it creates real data in your DB — you can for example use afterAll from jest and clear the database then.

[RobertBroersma]

It makes sense that it works, I just didn't expect that it would! I got thrown off by the test in example that does mock useQuery

you can for example use afterAll from jest and clear the database then.

Yeah totally!