Challenge 1: Rewriting the Vue Example — Possible Solution
====================================================================

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

render(Greeting, { props: { name: "Ada" } });
expect(screen.getByRole("heading")).toHaveTextContent("Hello, Ada");

WHY THIS WORKS AS AN ANSWER
------------------------------
render(Greeting, {props}) replaces mount(Greeting, {props}) — the same
component and props, but returning access to the screen query object
instead of a wrapper meant to be queried with CSS selectors.

getByRole("heading") replaces wrapper.find(".greeting-heading") —
finding the element by its semantic ROLE (any heading tag like h1-h6
has an implicit "heading" role) rather than by a CSS class name that
exists purely for styling purposes and could be renamed at any time
without changing what a real user sees.

WHAT'S GAINED BY THE REWRITE: exactly this chapter's and Chapter 1/3's
core argument — the rewritten test no longer depends on the
implementation detail of a specific CSS class name. If the
"greeting-heading" class were renamed, or removed and replaced with a
CSS-in-JS solution, the ORIGINAL test would break even though nothing
about the actual user-visible greeting changed at all. The REWRITTEN
test would keep passing, because it only cares that SOME heading
element contains the text "Hello, Ada" — precisely the property a real
user (or a screen reader) would also notice, and precisely the same
convergence this chapter described between Vue's testing-library
flavor and React's own.