React Testing Library - possible to render page in browser

Question

I'm testing a UI with the React Testing Library. Wondering if there is any way (including incorporating a separate package) to render the page being created by a test in my browser as I run the test. I'm basically trying to accomplish what happens with Ruby's Capybara gem's save_and_open_page function within my React tests. Is it possible?

Galatians

I recommend looking at using something like cypress other than react-testing-library for doing this – Betterment

I like this question; in general I'd like to find a smoother solution to running a test suite from the command line and having a readily accessibly playground view (even if it's a link; but as the system works with the link by default is it just serializes the whole DOM in a query parameter from what I can tell lol) – Secateurs

Answer 1

You can render a component in the browser by using the testing playground:

import { screen } from "@testing-library/react"

render(<MyComponent />)

// log entire document to testing-playground
screen.logTestingPlaygroundURL()
// log a single element
screen.logTestingPlaygroundURL(screen.getByText('test'))

Xerxes

seems to cut it off after a certain point, just like console.log(prettyDOM())... makes it tough to debug, guess you gotten drill in like the second example. – Ostracon

lol yup, the URL printed out by this function literally overflowed my console buffer XD – Secateurs