#169 How to do unit testing of the components using JEST?

• Unit Testing = testing individual pieces of code (like functions or components) to ensure they work as expected.
• In React, we usually test components with libraries like:
  • Jest (test runner, assertion library)
  • React Testing Library (RTL) (for simulating DOM interactions).

---

🔹 Steps for Unit Testing React Components with Jest

1. Install Required Libraries

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

---

2. Configure Jest (if not already in CRA)

• If using Create React App, Jest is pre-configured.
• For custom setups, add this in package.json:

"scripts": {
  "test": "jest"
}

---

3. Write a Simple Component (Example)

// UserGreeting.js
import React from "react";

function UserGreeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default UserGreeting;

---

4. Create a Test File

By convention → ComponentName.test.js

// UserGreeting.test.js
import { render, screen } from "@testing-library/react";
import UserGreeting from "./UserGreeting";

test("renders greeting message with name", () => {
  render(<UserGreeting name="Dev" />);
  
  // find text in DOM
  const element = screen.getByText(/Hello, Dev!/i);
  
  // assertion
  expect(element).toBeInTheDocument();
});

✅ This checks if "Hello, Dev!" is rendered correctly.

---

5. Run Tests

npm test

Output Example:

PASS  src/UserGreeting.test.js
✓ renders greeting message with name (20 ms)

---

🔹 Example with Input & Button

// UserForm.js
import React, { useState } from "react";

function UserForm() {
  const [name, setName] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          placeholder="Enter name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      {submitted && <p data-testid="result">Hello, {name}!</p>}
    </div>
  );
}

export default UserForm;

✅ Test for this Component

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

test("submits form and shows greeting", () => {
  render(<UserForm />);

  // find input and button
  const input = screen.getByPlaceholderText("Enter name");
  const button = screen.getByText("Submit");

  // simulate typing
  fireEvent.change(input, { target: { value: "Dev" } });

  // simulate submit
  fireEvent.click(button);

  // check result
  const result = screen.getByTestId("result");
  expect(result).toHaveTextContent("Hello, Dev!");
});

---

🔹 Summary

✅ Jest → test runner & assertion framework.
✅ React Testing Library → simulates user interactions.
✅ Steps:

1. Render component using render().
2. Find elements using screen.getByText / getByRole / getByPlaceholderText.
3. Simulate events with fireEvent.
4. Assert results using expect().