https://github.com/rofiyev/nextjs-testing

The Counter component is a simple component in NextJS that manages the count state. It contains two buttons to increase and decrease the number and a header to display the current number. In this case, we will test the state of our component by writing a test to the component we have created
https://github.com/rofiyev/nextjs-testing

jest jest-test nextjs reactjs tailwindcss testing-library

Last synced: about 5 hours ago
JSON representation

The Counter component is a simple component in NextJS that manages the count state. It contains two buttons to increase and decrease the number and a header to display the current number. In this case, we will test the state of our component by writing a test to the component we have created

• Host: GitHub
• URL: https://github.com/rofiyev/nextjs-testing
• Owner: Rofiyev
• Created: 2024-06-28T14:43:16.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-28T15:05:09.000Z (5 months ago)
• Last Synced: 2024-06-29T16:09:41.965Z (5 months ago)
• Topics: jest, jest-test, nextjs, reactjs, tailwindcss, testing-library
• Language: TypeScript
• Homepage:
• Size: 102 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Counter component

This project contains a simple Counter component built with NextJS. The component allows users to increment and decrement the calculated value displayed in the header.

## Contents

- [Description](#description)

- [Install](#install)

- [Usage](#usage)

- [Test](#test)

- [License](#license)

## Description

The Counter component is a simple component in NextJS that manages the count state. It contains two buttons to increase and decrease the number and a header to display the current number. In this case, we will test the state of our component by writing a test to the component we have created

## Installation

To set up the project, follow these steps:

1. Clone the repository:

   ```bash

   git clone https://github.com/Rofiyev/nextjs-testing.git

   cd nextjs-testing

   ```

2. Install the dependencies:

   ```bash

   npm install

   ```

3. Run the development server:

   ```bash

   npm run dev

   ```

   Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Preview

### app/page.tsx

```javascript

import Counter from "./components/Counter";

export default function Home() {

  return ;

}

```

### app/components/Counter.tsx

```javascript

"use client";

import { useState } from "react";

export default function Counter() {

  const [count, setCount] = useState < number > 0;

  const increment = () => setCount((prev: number) => prev + 1);

  const decrement = () => setCount((prev: number) => prev - 1);

  return (

    


      
{count}

      


        

          Increment

        

        

          Decrement

        

      

    

  );

}

```


## Testing File

### \_\_tests\_\_/counter.test.jsx

```javascript

import "@testing-library/jest-dom";

import { render, screen, fireEvent } from "@testing-library/react";

import Counter from "@/components/Counter";

describe("Counter Component Testing", () => {

  it("Counter change check!", () => {

    render();

    const heading = screen.getByRole("heading", { name: "0" });

    const increment = screen.getByRole("button", { name: "Increment" });

    const decrement = screen.getByRole("button", { name: "Decrement" });

    fireEvent.click(increment);

    expect(heading).toBeInTheDocument();

    expect(heading).toHaveTextContent("1");

    fireEvent.click(decrement);

    expect(heading).toHaveTextContent("0");

  });

});

```

## Run Test FIle

To set up the project, follow these steps:

1. You will need to open a terminal:

   ```bash

   Ctrl + Shift + `

   ```

2. You have to write:

   ```bash

   npm run test

   ```

> You will then be able to see the result of the component test!

## Explanation

1. **Description**: Provides a brief overview of the `Counter` page functionality.

2. **Installation**: Steps to set up the project by cloning the repository, installing dependencies, and running the development server.

3. **Usage**: Instructions on how to use the `Counter` component in a Next.js application.

4. **Testing**: Details about the testing setup and how to run the tests.

5. **License**: Information about the project's license.

This `README.md` file should provide a comprehensive guide to understanding, setting up, and testing the `Counter` page in your Next.js project.