Why Every Software Tester Should Learn React JS in 2026

// CartButton.jsx
import { useState } from "react";

export default function CartButton({ productName }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{productName} in cart: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Add to cart
      </button>
      {count > 0 && (
        <button onClick={() => setCount(0)}>Clear</button>
      )}
    </div>
  );
}

READING THE COMPONENT AS A TESTER

Props   : productName  -> comes from the parent.
          Test with long names, empty names, special characters.

State   : count, starts at 0.
          Test the initial value, one click, many fast clicks.

Logic   : "Clear" appears only when count > 0.
          Test that it is hidden at 0, shown at 1,
          and hidden again after clicking it.

Missing : no maximum limit, no link to a real cart API.
          Ask: what should happen at 99+? After page refresh?

// Run in the browser DevTools console on the app under test

// Is React present on this page? (React DevTools adds this hook)
Boolean(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)

// Count buttons that have no accessible name
[...document.querySelectorAll("button")]
  .filter(b => !b.textContent.trim() && !b.getAttribute("aria-label"))
  .length

// List all data-testid values on the current screen
[...document.querySelectorAll("[data-testid]")]
  .map(el => el.dataset.testid)

SLOW NETWORK TEST (Chrome DevTools)

1. Open DevTools -> Network tab
2. Change "No throttling" to "Slow 4G" (or "3G")
3. Reload the page and watch:
   [ ] Is a loading indicator shown?
   [ ] Can the user click buttons before data loads?
   [ ] Does an empty state flash before real data?
4. Change a filter twice quickly
   [ ] Do final results match the last filter chosen?
5. Set "Offline" and retry an action
   [ ] Is there a clear error message, not a blank page?

// CartButton.test.jsx  (Jest or Vitest + React Testing Library)
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CartButton from "./CartButton";

test("adds an item and shows Clear", async () => {
  const user = userEvent.setup();
  render(<CartButton productName="Notebook" />);

  expect(screen.getByText("Notebook in cart: 0")).toBeInTheDocument();
  expect(screen.queryByRole("button", { name: "Clear" })).toBeNull();

  await user.click(screen.getByRole("button", { name: "Add to cart" }));

  expect(screen.getByText("Notebook in cart: 1")).toBeInTheDocument();
  expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument();
});

// toBeInTheDocument needs @testing-library/jest-dom in the test setup

// tests/cart.spec.ts  (Playwright)
import { test, expect } from "@playwright/test";

test("user adds a product to the cart", async ({ page }) => {
  await page.goto("https://staging.example.com/products/notebook");

  await page.getByRole("button", { name: "Add to cart" }).click();

  // Web-first assertion: retries until the UI updates
  await expect(page.getByText("Notebook in cart: 1")).toBeVisible();

  await page.getByRole("button", { name: "Clear" }).click();
  await expect(page.getByRole("button", { name: "Clear" })).toBeHidden();
});

// Run: npx playwright test

UI BUG REPORT — React app

Title      : Cart count stays at 0 after adding item from search
Build      : web v3.8.2 (staging)
Browser    : Chrome, desktop
Steps      : 1. Search "notebook"  2. Click Add to cart on result
Expected   : Header cart badge shows 1
Actual     : Badge shows 0 until page refresh
Component  : HeaderCartBadge (seen in React DevTools)
State seen : CartButton count = 1, HeaderCartBadge items = 0
Console    : no errors
Network    : POST /api/cart returned 200
Likely area: shared cart state not updated after search add

EXPLORATORY CHARTER — React list screen

Mission : Explore the Orders table for state and list bugs
Time    : 45 minutes

Ideas to try:
  [ ] Type in an inline field, then sort the table
  [ ] Filter, then delete a row, then clear the filter
  [ ] Throttle to Slow 4G and change pages quickly
  [ ] Open an order with missing optional fields
  [ ] Use back/forward buttons after editing
  [ ] Resize to mobile width

Notes / bugs found: ___________________________

LOCATOR GUIDE (agree with developers)

Priority  Locator                         Example
--------  ------------------------------  ---------------------------
1         Role + accessible name          getByRole('button', {name:'Save'})
2         Label for form fields           getByLabel('Email')
3         Visible text                    getByText('Order placed')
4         Placeholder (if no label)       getByPlaceholder('Search')
5         data-testid (agreed)            getByTestId('cart-count')
Avoid     Generated CSS classes, nth-child, long XPath