Forem: Onurhan

JavaScript IIFE: A Complete Guide to Immediately Invoked Function Expressions

Onurhan — Sat, 23 Nov 2024 18:52:30 +0000

JavaScript offers various tools for handling scope and execution effectively, and one of the most notable ones is the Immediately Invoked Function Expression (IIFE).

An IIFE is a function that is executed immediately after being defined, providing a private scope for variables and functionality. This technique is commonly used in scenarios where clean, modular, and conflict-free code is required.

What Is an IIFE?

An IIFE is a JavaScript function that runs as soon as it is defined. Here's what it looks like:

(function () {
  console.log("This is an IIFE!");
})();

Or, Using ES6 arrow functions, it looks like this:

(() => {
  console.log("IIFE with an arrow function!");
})();

The first set of parentheses () wraps the function definition, making it a function expression rather than a declaration. The second set of parentheses () immediately invokes the function.

Alternative IIFE Syntax

There are several valid ways to write IIFEs:

// Using the unary operator
!(function () {
  console.log("IIFE using !");
})();

// Using void
void (function () {
  console.log("IIFE using void");
})();

// Using + operator
+(function () {
  console.log("IIFE using +");
})();

// IIFE with parameters and return value
const result = (function (x, y) {
  return x + y;
})(10, 20);
console.log(result); // 30

Why Use IIFEs?

IIFEs offer several advantages:

Avoiding Global Scope Pollution: Encapsulates variables, preventing conflicts with global variables.
One-Time Initialization: Great for setup tasks like configuration.
Encapsulation for Modularity: Keeps code organized and self-contained.
Closure Creation: Maintains private state within a function.

Real-World Examples

Wrapping Utility Functions

const utils = (function () {
  const calculateSum = (a, b) => a + b;
  const calculateProduct = (a, b) => a * b;

  // Only expose what we want to be public
  return {
    sum: calculateSum,
    // product remains private
  };
})();

console.log(utils.sum(3, 7)); // 10
console.log(utils.calculateProduct); // undefined

In this example, the calculateSum function is private and cannot be accessed outside the IIFE.

Mimicking Block Scope in Older JavaScript

Before let and const were available, developers used IIFEs to achieve block scoping.

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 1000); // 0, 1, 2
  })(i);
}

Singleton Pattern with IIFE

const Config = (function () {
  let instance;

  function createInstance() {
    const settings = {
      theme: "dark",
      language: "en",
    };

    return {
      getSettings: () => settings,
      updateSettings: (newSettings) => Object.assign(settings, newSettings),
    };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

const config1 = Config.getInstance();
const config2 = Config.getInstance();
console.log(config1 === config2); // true

Module Pattern

const Calculator = (function () {
  // Private variables and methods
  let result = 0;

  function validate(num) {
    return typeof num === "number" && !isNaN(num);
  }

  // Public API
  return {
    add: function (num) {
      if (validate(num)) {
        result += num;
      }
      return this;
    },
    subtract: function (num) {
      if (validate(num)) {
        result -= num;
      }
      return this;
    },
    getResult: function () {
      return result;
    },
  };
})();

Modern Alternatives

While IIFEs are still useful in certain scenarios, modern JavaScript offers several alternatives with their own advantages. Here's a comparison:

When to Use IIFEs Today

IIFEs are still relevant for:

Third-Party SDKs: Avoiding global variable conflicts.
Analytics Code: Isolating tracking logic.
Legacy Code Maintenance: Maintaining older codebases without modern features.
Browser Extensions: Ensuring compatibility without modules.
Polyfills: Providing backward compatibility.

Best Practices and Pitfalls

Advanced Use Cases

Event Handling with IIFE

const handler = (function () {
  let count = 0;

  return function (event) {
    count++;
    console.log(`Event handled ${count} times`);
  };
})();

document.addEventListener("click", handler);

Namespace Pattern

const MyApp = (function () {
  // Private namespace
  const privateStuff = {
    count: 0,
    increment() {
      this.count++;
    },
  };

  // Public API
  return {
    version: "1.0.0",
    getCount() {
      return privateStuff.count;
    },
    increment() {
      privateStuff.increment();
    },
  };
})();

Performance Considerations

Bundle Size Impact

// Avoid multiple nested IIFEs
const badPattern = (function () {
  return (function () {
    return (function () {
      // This creates unnecessary function contexts
    })();
  })();
})();

// Better approach
const betterPattern = (function () {
  // Single function context
  const innerLogic = {};
  return innerLogic;
})();

Execution Context

// Creates new context each time
const inefficient = function () {
  return (function () {})();
};

// Better - single context
const efficient = (function () {
  const cached = {};
  return function () {
    return cached;
  };
})();

Conclusion

While modern JavaScript features like ES modules and block scoping have reduced the need for IIFEs in some scenarios, they remain an important pattern in JavaScript development. Understanding IIFEs is crucial for working with existing codebases, creating browser-compatible libraries, and implementing certain design patterns effectively.

Remember that the choice between using an IIFE and modern alternatives should be based on your specific use case, browser support requirements, and project constraints.

Automate the tasks using Vercel Cron Jobs

Onurhan — Tue, 09 Jul 2024 21:23:38 +0000

Cron Jobs are commands that run automatically at specific time intervals (e.g. daily, weekly, hourly).

The Cron job feature can be used for operations performed at specific intervals such as data synchronization, email sending, backup operations, and more.

Vercel, on the other hand, hosts the Cron Jobs feature on its platform and offers space to manage and run them.

How to Use

Vercel has prepared a comprehensive document on this topic. You can get more detailed information about how to create and manage it.

In this article, I will talk step by step about how I use Cron Jobs in my Lotus project.

Configuration

First, I create a vercel.json file in the main directory of the project. In this file, we will specify the relevant API route path information and frequency.

The Lotus project contains challenges and each of them has end dates. I set the frequency for each new day so that the challenge status information is updated when the end date arrives.

{
  "crons": [
    {
      "path": "/api/cron",
      "schedule": "0 0 * * *"
    }
  ]
}

The values next to Schedule may seem meaningless, but they are used to specify the frequency. The value in the code fragment above means once every 24 hours. Below you can view other examples shared in the document.

Also, if the interval you want to set is not listed, you can easily find out the corresponding time interval by accessing the relevant document page from the link here and using the Cron job validator feature.

Just use it

After the configuration phase, all we need to do is to create a file in the API route we specified in the vercel.json file and then write the process file we want into it.

In the Vercel document, examples are given for this using the World Time API, Serverless and Edge functions are supported.

// app/api/cron/route.ts
export async function GET() {
  const result = await fetch(
    'http://worldtimeapi.org/api/timezone/America/Chicago',
    {
      cache: 'no-store',
    },
  );
  const data = await result.json();

  return Response.json({ datetime: data.datetime });
}

Securing cron jobs

You can secure cron jobs by assigning the CRON_SECRET environment key. Vercel recommends using a random password of 16 characters for this.

Then this defined key is automatically sent with the header as Authorization information when a Vercel cron job is called.

import type { NextRequest } from 'next/server';

export function GET(request: NextRequest) {
  const authHeader = request.headers.get('authorization');
  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return new Response('Unauthorized', {
      status: 401,
    });
  }

  return Response.json({ success: true });
}

Limitations

You don’t need a Pro plan to use the Cron Jobs feature, but if you want to use it more extensively, you should take a look at the limitations.

Deploy

You can either use it via Vercel CLI with the command below or by committing the changes to GitHub and then redeploying.

$ vercel deploy --prod

Cron Jobs in Lotus

Cron Jobs has many options such as dynamic routes and secure requests, but my needs in this regard were more limited. So I set it to trigger once every 24 hours, as shown in the vercel.json file I shared above.

Then I created an API route. First, I got the currentDate information and used Prisma’s LTE feature and currentDate information to find the challenges that are active and whose deadline is before or equal to today.

import prisma from "@/lib/prisma";
import { NextResponse } from "next/server";

export async function GET() {
  try {
    const currentDate = new Date();

    const expiredChallenges = await prisma.challenge.findMany({
      where: {
        endDate: {
          lte: currentDate,
        },
        isActive: "ACTIVE",
      },
    });

    if (expiredChallenges.length === 0) {
      return NextResponse.json({
        message: "No expired challenges found",
      });
    }

    return NextResponse.json({
      message: "Expired challenges updated",
    });

  catch (error: any) {
    return NextResponse.json({
      message: "Error updating challenges.",
      error: error.message,
    });
  }
}

Since I only needed the ID information, I defined an array and extracted the expiredChallenges.

Then I updated the isActive property of each one to COMPLETED using Prisma’s updateMany property.

    const expiredChallengeIds = expiredChallenges.map(
      (challenge) => challenge.id
    );

    await prisma.challenge.updateMany({
      where: {
        id: {
          in: expiredChallengeIds,
        },
      },
      data: {
        isActive: "COMPLETED",
      },
    });

Manage Cron Jobs

You can come to the settings page of the project via the Vercel dashboard, click on Cron Jobs and then view it. You can review the logs or run manually to test them.

Thank you for reading my article. Follow me on X.

https://buymeacoffee.com/onurhan

How to Validate a Date Range Picker with Zod in TypeScript Projects

Onurhan — Sun, 14 Apr 2024 06:04:14 +0000

What is Zod?

Zod is a TypeScript-first schema declaration and validation library.

Prerequisites

I used shadcn/ui for the date range picker component, date-fns for the date format, and zod for the validation.

Getting started

Creating challenges on the Lotus project requires attention to detail, especially when setting the start and end dates. To simplify this process for others, I wrote an blog about creating a date range selection component for the challenge creation form.

First, I use Zod to create a new schema called dateRangeSchema. This schema has a date range object with the start date and end date of the form data.

import { z } from "zod";
export const dateRangeSchema = z
  .object({
    // other fields
    dateRange: z.object(
      {
        from: z.date(),
        to: z.date(),
      },
      {
        required_error: "Please select a date range",
      }
    ),
  })
  .refine((data) => data.dateRange.from < data.dateRange.to, {
    path: ["dateRange"],
    message: "From date must be before to date",
  });

Now that the Zod schema is ready, I will create the form step by step, starting with the necessary imports.

I have added the dateRangeSchema content to @/zod/schemas/date-range.ts. You can save it in the file if you want but don't forget to edit it if necessary.

import { cn } from "@/lib/utils";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "../ui/form";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { dateRangeSchema } from "@/zod/schemas/date-range";

Schema and imports are done. Now I can create the component. When I create the component, I first define defaultValues and resolver using useForm.

defaultValues is a property that sets the initial values of the form fields when the form is first loaded or reset.
zodResolver is a function that converts a Zod schema into a form resolver, ensuring that the form data matches the schema before submission.

export const Component = () => {
  const form = useForm({
    defaultValues: {
      dateRange: {
        from: new Date(),
        to: new Date(),
      },
    },
    resolver: zodResolver(dateRangeSchema),
  });

  const onSubmit = (data: z.infer<typeof dateRangeSchema>) => {
    console.log(data);
  };

  return (
    // ...
  );
};

Now everything is ready. Finally, I include the date range picker in Component using shadcn/ui forms.

return (
  <Form {...form}>
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <FormField
        control={form.control}
        name="dateRange"
        render={({ field }) => (
          <FormItem className="flex flex-col">
            <FormLabel>Start and End Date</FormLabel>
            <Popover modal={true}>
              <PopoverTrigger asChild>
                <Button
                  id="date"
                  variant="outline"
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    !field.value.from && "text-muted-foreground"
                  )}
                >
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {field.value.from ? (
                    field.value.to ? (
                      <>
                        {format(field.value.from, "LLL dd, y")} -{" "}
                        {format(field.value.to, "LLL dd, y")}
                      </>
                    ) : (
                      format(field.value.from, "LLL dd, y")
                    )
                  ) : (
                    <span>Pick a date</span>
                  )}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="center">
                <Calendar
                  initialFocus
                  mode="range"
                  defaultMonth={field.value.from}
                  selected={{
                    from: field.value.from!,
                    to: field.value.to,
                  }}
                  onSelect={field.onChange}
                  numberOfMonths={2}
                />
              </PopoverContent>
            </Popover>
            <FormDescription>Select the start and end date</FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
    </form>
  </Form>
);

Now we have everything ready. To make the code better,

You can make Date Range Picker a component.
You can improve the onSubmit functionality of the form by using the Sonner package.
You can add custom error messages to the schema.

follow me on X.

Supabase & Lemon Squeezy login with magic link

Onurhan — Wed, 27 Mar 2024 18:53:45 +0000

In the realm of online sales, the journey from seller to buyer is often marked by complexities. However, with the strategic fusion of Supabase and Lemon Squeezy, a new paradigm emerges, simplifying this journey for both parties.

How it works

To create a plot, a seller (X) puts their product for sale on Lemonsqueezy and a buyer (Y) purchases it. We use the Lemon Squeezy API KEY and a magic link form with Supabase to check if the buyer's email is linked to the purchase. If it is, a magic link is sent to the buyer's email for product access.

Create your store

To create your store, go to Lemon Squeezy. Follow the steps explained there to add your first product. Get the API KEY by going to Settings > API tab from the Store panel and creating one.

Create project

npx create-next-app@latest

Add environment variables

  LEMON_SQUEEZY_KEY=
  NEXT_PUBLIC_SUPABASE_URL=
  NEXT_PUBLIC_SUPABASE_ANON_KEY=

After creating the project and adding environment variables, include Supabase.

npm i @supabase/ssr @supabase/supabase-js

Include the following files in lib > supabase in the main directory of your project.

Now I will create a magic link form and then the API file. Then we will include the pages that will be shown to the user who will log in with the magic link.

magic-link-form.tsx

"use client";

import { useState } from "react";

export default function MagicLinkForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const response = await fetch(
      `/api/customers?email=${encodeURIComponent(email)}`
    );
    const data = await response.json();
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-4 rounded-md p-4"
    >
      <div>
        <label
          htmlFor="email"
          className="text-gray-1100 mb-1.5 block text-[13px]"
        >
          Email
        </label>
        <input
          id="email"
          type="email"
          value={email}
          placeholder="name@domain.com"
          onChange={(e) => setEmail(e.target.value)}
          className="bg-gray-00 h-10 w-full rounded-md border border-gray-300 px-3 outline-none placeholder:text-gray-500 md:text-sm"
          required
          autoFocus
        />
      </div>
      <button
        className="relative mt-3 flex h-10 w-full items-center justify-center gap-2 overflow-hidden rounded-md border border-gray-300 bg-gray-200/50 text-sm font-medium transition-all hover:bg-[#F5F5F5]"
        type="submit"
      >
        Send me a login link
      </button>
    </form>
  );
}

The code takes user input in the form of an email address and sends it to /api/customers?email= to check if the user has made any purchases through the Lemon Squeezy API.

app/api/customers/route.ts

import { createClient } from "@/lib/supabase/server";

const BASE_URL = "https://course-onurhan.vercel.app";

export async function GET(request: Request) {
  const supabase = createClient();
  const { searchParams } = new URL(request.url);
  const email = searchParams.get("email");

  if (!email) {
    return new Response(JSON.stringify({ error: "Email is required" }), {
      status: 400,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }

  try {
    const res = await fetch(
      `https://api.lemonsqueezy.com/v1/customers?filter[email]=${email}`,
      {
        headers: {
          Authorization: `Bearer ${process.env.LEMON_SQUEEZY_KEY}`,
          Accept: "application/json",
        },
      }
    );

    const { data: foundCustomers } = await res.json();

    if (foundCustomers.length === 0) {
      return new Response(
        JSON.stringify({ error: "No customer found with that email" }),
        {
          status: 404,
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
    }

    const { data: magicLink, error: authError } =
      await supabase.auth.signInWithOtp({
        email,
        options: {
          shouldCreateUser: true,
          emailRedirectTo: `${BASE_URL}/videos`,
        },
      });

    if (authError) {
      throw new Error(authError.message);
    }

    return new Response(JSON.stringify({ magicLink }), {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    });
  } catch (error: any) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

created BASE_URL for the domain, but you can create separate keys for both localhost and production in your .env.local file and use them, it will be much better.
used the searchParams property to access the user's form input. Through the Lemon Squeezy API, I check if the user is a customer with the email address they typed in.
When a customer was present, I utilized Supabase's signInWithOtp feature to send them a magic link.

To edit the site URL and magic link in the email content sent to the user, go to the Authentication section from the Supabase panel and then from the URL Configuration area, Email templates > Magic Link for Magic link mail content.

The email template sent to the user does not have the information we want by default. For this, I need to edit the Magic link content as follows.

<h2>Magic Link</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">Log In</a></p>

After completing these steps, we can now move on to the next step. The user who clicks on the Log In button in the email will be directed to the verification page. Now I am going to build this verification page.

app/auth/confirm/route.ts

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { type EmailOtpType } from "@supabase/supabase-js";
import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const token_hash = searchParams.get("token_hash");
  const type = searchParams.get("type") as EmailOtpType | null;
  const next = searchParams.get("next") ?? "/";
  const redirectTo = request.nextUrl.clone();
  redirectTo.pathname = next;

  if (token_hash && type) {
    const cookieStore = cookies();
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          get(name: string) {
            return cookieStore.get(name)?.value;
          },
          set(name: string, value: string, options: CookieOptions) {
            cookieStore.set({ name, value, ...options });
          },
          remove(name: string, options: CookieOptions) {
            cookieStore.delete({ name, ...options });
          },
        },
      }
    );

    const { error } = await supabase.auth.verifyOtp({
      type,
      token_hash,
    });
    if (!error) {
      return NextResponse.redirect(redirectTo);
    }
  }

  // return the user to an error page with some instructions
  redirectTo.pathname = "/auth/auth-code-error";
  return NextResponse.redirect(redirectTo);
}

get token_hash and type information from the user.
If this information is available, a cookie is set for the user.
If verifyOtp property has no error, redirectTo function is executed and user is redirected to relevant page.

After that, you can now offer your logged-in user the opportunity to view any page and content using Supabase stuffs.

While writing this post I was inspired by @emilkowalski's story of creating the Video course platform project. I would like to express my gratitude to him. Check out his project.

Building a Component Library from Scratch

Onurhan — Tue, 13 Jun 2023 19:07:35 +0000

Hello, I'm Onurhan. Before you start developing a component library, you should ask yourself the following question:

Why should I develop a component library?
There are several reasons for this. The main one is consistency. When you are going to use it in multiple projects, consistency in design and behavior across projects is very important, and this saves time and energy by eliminating the need to create similar structures over and over again.

In addition, it will make your project very successful in terms of testability. It can also be part of something bigger than you can imagine, an open source project. It can allow you to build a large component library across a large number of projects.

Below are projects that I think are inspiring and successful. Be sure to take a look at each one and get inspired.

In my chat with Shadcn he gave me a very valuable advice and I would like to pass it on to you.

I did try building from scratch but it's a lot of work. I've learned a lot of myself by building on top of proven libraries. And once you've implemented one or two components you start to get a feel on how the library is structured and this helps with understanding how you can extend it and build your own custom components.

I absolutely agree with him because, as I mentioned at the beginning, we don't need to reinvent anything. Building on proven libraries would be a good choice.

The examples I share below include packages that can be used when creating a component library.

radix-ui: A project I found very successful, in addition shadcn/ui uses components from radix's project.
headless-ui: Although its content seems limited compared to radix, it's a good resource for creating successful primitve components with soft animations.
adobe-react-aria: A very good solution for the concept of accessibility, which was only realized later as a need and importance when developing component libraries.

Select tools and framework
In addition to the packages I shared above, we come to the tech stack selection where you will develop the components.

React
Typescript - optional but recommended
Storybook - a great tool for previewing and documenting components
Vitest - a successful framework for unit testing

Tips

Take care to use Typescript
Don't forget to create your readme file or docs website and support it with detailed content
Study the Storybook document in detail and make sure to use it, I am sure it will be very useful
You can use Turborepo to make monorepo

Now you have the basics and resources. I'm going to develop my own component library piece by piece by joining the #buildinpublic movement and publish it both on my twitter account and on my blog. Have a healthy day.

How to Set Up Cypress for Next.js with TypeScript: A Step-by-Step Guide

Onurhan — Mon, 06 Mar 2023 10:55:04 +0000

Hello everyone, I'm Onurhan. today I'll talk about how to include Cypress in a nextjs & typescript project and how to write a component test.

Next.js Project Setup

To create a Next.js Typescript project, use the following code:

npx create-next-app@latest --typescript

Include Cypress in the project

npm i cypress -D
yarn add cypress --dev

let's write our first component

After completing the setup successfully, we need to make some adjustments when using typescript.

Firstly, we add "cypress": "cypress open" to the package.json file.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open"
  },

Next, we go to the terminal and run Cypress.

npm run cypress
yarn cypress

Then we click on the component testing option as shown below.

After that, Next.js will automatically detect and display the configuration files it needs to include, and we confirm each of them.

And voila! We have successfully completed the process. Then we click on the "create from component" option that we see in the above picture. At this stage, I'm creating a simple reusable button component that we can write a test file in.

I created a component in the components>Button>Button.tsx file path.

import React from "react";

type ButtonProps = Omit<React.ComponentProps<"button">, "type"> & {
  onClick: () => void;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  className?: string;
};

const defaultProps: ButtonProps = {
  disabled: false,
  onClick: () => {},
};

const Button: React.FC<ButtonProps> = ({
  onClick,
  type,
  disabled,
  children,
  className,
}: ButtonProps) => {
  const handleClick = () => {
    if (!disabled && onClick) {
      onClick();
    }
  };
  return (
    <button
      type={type}
      onClick={handleClick}
      disabled={disabled}
      className={className}
    >
      {children}
    </button>
  );
};

Button.defaultProps = defaultProps;
export default Button;

Now we go back to the Cypress panel and select this component we created from the "create from component" option.

After selecting it, it creates a test file named "Button.cy.tsx" for us. We can write our test codes in this file. You can find more detailed information on this topic here .

import React from "react";
import Button from "./Button";

describe("<Button />", () => {
  it("renders with text and onClick", () => {
    cy.mount(<Button onClick={() => {}}>Click me</Button>);

    cy.get("Button")
      .should("have.text", "Click me")
      .and("not.have.attr", "disabled");

    cy.get("Button").click();

    cy.get("Button")
      .should("have.text", "Click me")
      .and("not.have.attr", "disabled");
  });

  it("renders with text and onClick and disabled", () => {
    cy.mount(
      <Button onClick={() => {}} disabled>
        Click me
      </Button>
    );

    cy.get("Button").should("have.attr", "disabled");
  });

  it("renders with text and onClick and disabled and type", () => {
    cy.mount(
      <Button onClick={() => {}} disabled type="submit">
        Click me
      </Button>
    );

    cy.get("Button").should("have.attr", "type", "submit");
  });

  it("renders with text and onClick and disabled and type and className", () => {
    cy.mount(
      <Button onClick={() => {}} disabled type="submit" className="test">
        Click me
      </Button>
    );

    cy.get("Button").should("have.attr", "type", "submit");
  });
});

Above, we wrote sample tests for our Button component, and you can expand and experiment with it as you wish. When we run this test file and inspect it, we get an output like the one shown in the image below.

NOTE: Do not include the Cypress file in the .gitignore file.

When building, you may encounter the "'commands.ts' cannot be compiled under '--isolatedModules'..." error. In this case, we go to the cypress > support > commands.tsx file, and after including export{}, there will be no problem when building.

/// <reference types="cypress" />
export {}
...
...
...

WARNING: Nextjs getServerSideProps or getStaticProps do not work in component tests since they only run on the server side. However, an end-to-end test runs and tests an entire page. Therefore, it is recommended that you use E2E Testing for Next.js pages instead of Component Testing and Component Testing for separate components in a Next.js application. (via Cypress document)

Thank you for reading my article 🐱‍👤,In my upcoming posts, I will be discussing how to write E2E tests and advanced component tests. you can share your questions and feedback in the comments. Don't forget to visit my personal website.