[Unit Testing - React] Use the Testing Playground to Help Decide Which Query to Pick

Querying is difficult! Even if we follow the guiding principles and always start from the queries accessible to everyone, we are bound to get stuck sometimes. To help us out, the Testing Playground was created.

In this lesson, we are going to see how to use the Testing Playground to help us know which query we should use for each element on our UI.

import { render, within, screen } from "@testing-library/react"
import App from "./App"

describe("App test", () => {
  it("finds a button inside a div", () => {
     render(<App />)
     const div = screen.getByTestId(/childContainer/i)
      
     screen.logTestingPlaygroundURL() // it generates a URL you can open the playground to check the selector 
      
     const buttonInsideDiv = within(div).getByRole("button", {
        name: /show hidden text/i
     })
     expect(buttonInsideDiv).toBeInTheDocument()
  })
})