How React JS Helps You Land a QA Tester Job Faster

import { useState } from "react";

export default function QuantityPicker({ max = 5 }) {
  const [qty, setQty] = useState(1);
  return (
    <div>
      <button aria-label="decrease" onClick={() => setQty(Math.max(1, qty - 1))}>-</button>
      <span data-testid="qty">{qty}</span>
      <button aria-label="increase" onClick={() => setQty(Math.min(max, qty + 1))}>+</button>
    </div>
  );
}

Test ideas from reading the component above:
1. Starts at 1
2. "-" at 1 stays at 1 (lower boundary)
3. "+" stops at max (upper boundary, default 5)
4. Different max prop on another page (e.g. max=2)
5. Rapid clicking does not skip or exceed limits
Knowing state and props turned code into test cases.

import { test, expect } from "@playwright/test";

test("increase quantity up to the limit", async ({ page }) => {
  await page.goto("http://localhost:3000/product/42");
  const plus = page.getByRole("button", { name: "increase" });
  for (let i = 0; i < 10; i++) await plus.click();
  await expect(page.getByTestId("qty")).toHaveText("5");
});

from selenium.webdriver.common.by import By

plus = driver.find_element(By.CSS_SELECTOR, "button[aria-label='increase']")
qty = driver.find_element(By.CSS_SELECTOR, "[data-testid='qty']")

for _ in range(10):
    plus.click()
assert qty.text == "5"

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import QuantityPicker from "./QuantityPicker";

test("does not go below 1 or above max", async () => {
  const user = userEvent.setup();
  render(<QuantityPicker max={2} />);

  await user.click(screen.getByRole("button", { name: "decrease" }));
  expect(screen.getByTestId("qty")).toHaveTextContent("1");

  await user.click(screen.getByRole("button", { name: "increase" }));
  await user.click(screen.getByRole("button", { name: "increase" }));
  expect(screen.getByTestId("qty")).toHaveTextContent("2");
});

# In a React project (e.g. created with Vite)
npm install --save-dev vitest jsdom @testing-library/react \
  @testing-library/user-event @testing-library/jest-dom

# vite.config.js -> test: { environment: "jsdom", setupFiles: "./setup.js" }
# setup.js       -> import "@testing-library/jest-dom/vitest";
npx vitest run

Week 1: JavaScript basics refresher (functions, arrays,
        promises, async/await)
Week 2: React basics — components, props, state,
        events (build 3 tiny components)
Week 3: Locators — roles, labels, test IDs;
        automate a React demo app with Playwright
Week 4: React Testing Library — 5 component tests;
        write a README and resume bullets

- Quantity picker with min/max
- Login form with validation messages
- Search box with results loading from an API
- Todo list with add, complete and filter
Write test cases first, then automate them.

- Automated a React demo store with Playwright using
  role-based locators and agreed data-testid attributes
- Wrote component tests with React Testing Library for
  boundary and validation cases
- Reported UI state bugs with component-level detail