Scribd Logo
Upload

Welcome to Scribd!

  • 420 views

    Cheat Sheet PDF

    Uploaded by

    Gonçalo Rações
    This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Cheat Sheet PDF

    Uploaded by

    Gonçalo Rações
    420 views1 page
    This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

    Original Description:

    Original Title

    cheat-sheet.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    420 views1 page

    Cheat Sheet PDF

    Uploaded by

    Gonçalo Rações
    This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 1

    React Testing Library Simple and complete cheat sheet v1

    github.com/kentcdodds/react-testing-library

    render a component search variants (return value) wait for appearance

    import {render} from ‘react-testing-library’ getBy Element or Error test('movie title appears', async () => {
    // Element is initially not present...
    getAllBy Element[] or Error expect(() => getByText(‘aladdin’)).toThrow()
    // See render result for more details…
    const result = render(<MyComponent />)
    queryBy Element or null // Wait for appearance
    await wait(() => {
    queryAllBy Element[] or [] expect(getByText(‘aladdin’)).toBeTruthy()
    })
    search the DOM
    findBy Promise<Element> or Error
    // Wait for appearance and return the result
    const {getByText} = render(<span>hello</span>) findAllBy Promise<Element[]> or Error await waitForElement(() => getByText(‘aladdin’))
    })

    // Check out jest-dom on npm for handy assertions…


    const element = getByText(‘hello’)
    search types (DOM attribute)
    assert for absence
    LabelText <label for=“element” />
    expect(queryByText('submit')).toBeNull()
    fire an event
    PlaceholderText <input placeholder=“username” />

    import {fireEvent} from ‘react-testing-library’


    Text <a href="/about">About</a> the render result (description)
    fireEvent.click(element)
    AltText <img alt=“movie poster” />
    // Or you can fire events manually with… container The target of ReactDOM.render()
    fireEvent(element, new MouseEvent(‘click’) Title <span title="Delete" /> or <title />
    baseElement App wrapper (usually <body> tag)
    DisplayValue Current value of input element
    debug(element) Pretty print the DOM
    pretty print the DOM Role <div role="dialog">...</div>
    unmount() Unmount your component
    TestId <input data-testid="username-input" />
    const {debug} = render(<div>hello</div>)
    rerender(ui) Render again at the container

    // Pretty print the DOM tree of your render …queries Queries for the baseElement
    debug() text matches
    ❌
    ✅
    const {getByText} = render(<div>Hello World</div>) cleanup the DOM
    wait for something
    getByText('Goodbye World’) // import ‘react-testing-library/cleanup-after-each’

    import {wait} from ‘react-testing-library’


    getByText(/hello world/) // // Or, for more control…
    getByText(‘ello Worl’, {exact: false}) // import {cleanup} from ‘react-testing-library’
    // Retry search every 50ms for 4500ms
    wait(() => getByText(‘async result’)) getByText(‘Hello World’) //
    afterEach(cleanup)

    You might also like