Setting Up a Test Environment
Learn how to set up a Cypress test environment.
We'll cover the following...
Now that we have our demo application ready, let’s integrate Cypress into it so we can test it. To use Cypress with Next.js, we first need to install the following packages: cypress
, start-server-and-test
, and shell-exec
.
Note: These packages are already installed at the backend. You can visit the appendix if you want to learn more about them.
Integrating Cypress
import * as trpcNext from "@trpc/server/adapters/next"; import { publicProcedure, router } from "@/server"; import { CreateEventSchema } from "@/createEventSchema"; import { prisma } from "@/prisma"; import slugify from "slugify"; import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library"; import { TRPCError } from "@trpc/server"; const appRouter = router({ create: publicProcedure .input(CreateEventSchema) .mutation(async ({ input }) => { try { const event = await prisma.event.create({ data: { name: input.name, slug: slugify(input.name, { lower: true }), description: input.description, location: input.location, dateTime: new Date(input.dateTime), }, }); return event; } catch (error) { if ( error instanceof PrismaClientKnownRequestError && error.code === "P2002" ) { throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "A meetup with this name already exists.", cause: error, }); } throw new TRPCError({ code: "BAD_REQUEST", message: "An unexpected error occurred, please try again later.", cause: error, }); } }), }); export type AppRouter = typeof appRouter; export default trpcNext.createNextApiHandler({ router: appRouter, });
Cypress custom test script
Our ...