Search⌘ K
AI Features
Home
Courses
Testing Next.js Applications with Cypress

Setting Up a Test Environment

Explore how to integrate Cypress into a Next.js application by installing necessary packages, building your app for testing, and configuring Cypress settings. This lesson guides you through creating a reliable test environment, ensuring your tests run smoothly and are maintainable.

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 ...