Week 5: React Testing Library

Slides: slides/03_react.pdf
Time: 50 minutes (Tune In 5 / Activity 40 / Reflection + Submit 5)

Get this instruction: https://github.com/ruhendrawan/cs1520_recitation

How to work

Work in pairs (discuss and share what you know/ assume/ learn)

Part 1 — Tune In (5 minutes)

Pick 1–2 concepts from slides/03_react.pdf and explain them in your own words (fast + messy is fine).

  • App.js vs index.js (or main.js)
  • document.getElementById()
  • createRoot()
  • useState
  • props in the component function
  • lifting state

What is it (in your own words)? Where would you use it?

Part 2 — Activity (40 minutes)

Learn to write vitest for React project using React Testing Library.

Keep working in pairs. Develop the code individually in https://classroom.github.com/a/fd5rEEZc

But, WHYY?

  • Creates shared understanding, between team members, of expected component behavior
  • Tests UI component behavior (what renders and how it responds to state changes)
  • Confident in refactoring (improve code readability without modifying behaviors)

If you’re stuck

Try these (in order):

  1. Print intermediate values (print(...)) to confirm your assumptions.
  2. Read the traceback from the top and find the first line in your code.
  3. Reduce the problem: make the smallest example that still fails.
  4. Ask the TA with: the error + what you tried + what you expected.

Read

Test the Tic-Tac-Toe project

Submit the code individually in https://classroom.github.com/a/fd5rEEZc

src/App.jsx contains the code from the React Tic-Tac-Toe tutorial. Write some tests in src/App.test.jsx to verify it is working correctly.

You should write 2 tests: 1) to verify a case when X would win the game, and 2) verify a case when O would win.

You are free to modify the application in App.jsx to better support testing
Refer to the documentation for React Testing Library.
Note that you can use the aria-label property of HTML elements to help match an element by role and name: https://testing-library.com/docs/queries/byrole/#api

Refer to the provided tests from Project 1 for additional usage examples.

Note that liberal use of regular expressions are made in Testing Library. /pattern/i will perform case-insensistive matches looking for the string "pattern".

Part 3 — Submit (5 minutes)

Submit your attendance in the google form: https://forms.gle/tYEtKjJunM1wb2we6

Project 1: React (UI or state)

Start working on your React final project individually:

  • UI: lay out the core screens/components (even static)
  • State: define your state shape + wire up one “happy path”

Pick any small deliverable: a new component renders with placeholder data; or one useState flow updates UI on click.

You'll be presenting (casually) your progress and personal challenge next week, to each other.