Testing Library

https://testing-library.com/docs
Admin
Testing Library is a user-centric testing utility that helps you test UI components by querying and...
Tokens:155,543
Snippets:1,299
Trust Score:9.9
Update:3 hours ago
Show doc for...
Tokens:
Raw
### Select tag example setup

Source: https://testing-library.com/docs/queries/bydisplayvalue/

HTML select element with options, where the option with value 'AK' is selected, used as the setup for the select tag examples.

```html
<select>
  <option value="">State</option>
  <option value="AL">Alabama</option>
  <option selected value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>
```

--------------------------------

### Setup function with userEvent.setup()

Source: https://testing-library.com/docs/user-event/intro/

Shows a setup function that returns the user object and the render result, allowing tests to use the user instance. The example includes a comment about importing render from the framework library.

```js
import userEvent from '@testing-library/user-event'

// setup function
function setup(jsx) {
  return {
    user: userEvent.setup(),
    // Import `render` from the framework library of your choice.
    // See https://testing-library.com/docs/dom-testing-library/install#wrappers
    ...render(jsx),
  }
}

test('render with a setup function', async () => {
  const {user} = setup(<MyComponent />)
  // ...
})
```

--------------------------------

### Input tag example setup

Source: https://testing-library.com/docs/queries/bydisplayvalue/

HTML input element and JavaScript to set its value to 'Norris', used as the setup for the input tag examples.

```html
<input type="text" id="lastName" />
```

```js
document.getElementById('lastName').value = 'Norris'
```

--------------------------------

### Textarea tag example setup

Source: https://testing-library.com/docs/queries/bydisplayvalue/

HTML textarea element and JavaScript to set its value to 'Hello World', used as the setup for the textarea tag examples.

```html
<textarea id="messageTextArea" />
```

```js
document.getElementById('messageTextArea').value = 'Hello World'
```

--------------------------------

### Quickstart test for Fetch component

Source: https://testing-library.com/docs/react-testing-library/example-intro/

Minimal setup to test a component that loads and displays a greeting. Uses render, screen, userEvent, and jest-dom matchers. The test clicks a button, waits for a heading, and asserts the heading text and button disabled state.

```jsx
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // ARRANGE
  render(<Fetch url="/greeting" />)

  // ACT
  await userEvent.click(screen.getByText('Load Greeting'))
  await screen.findByRole('heading')

  // ASSERT
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})
```

--------------------------------

### Install with Yarn

Source: https://testing-library.com/docs/dom-testing-library/install/

Install @testing-library/dom as a devDependency using Yarn.

```bash
yarn add --dev @testing-library/dom
```

--------------------------------

### Install rtl-simple-queries with npm

Source: https://testing-library.com/docs/ecosystem-rtl-simple-queries/

Install the library as a dev dependency using npm.

```bash
npm install --save-dev rtl-simple-queries
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/dom-testing-library/install/

Install @testing-library/dom as a devDependency using npm.

```bash
npm install --save-dev @testing-library/dom
```

--------------------------------

### Install rtl-simple-queries with Yarn

Source: https://testing-library.com/docs/ecosystem-rtl-simple-queries/

Install the library as a dev dependency using Yarn.

```bash
yarn add --dev rtl-simple-queries
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/ecosystem-cli-testing-library/

Install cli-testing-library as a dev dependency using npm.

```bash
npm install --save-dev cli-testing-library
```

--------------------------------

### Install @marko/testing-library with npm

Source: https://testing-library.com/docs/marko-testing-library/intro/

Install the library as a dev dependency using npm.

```bash
npm install --save-dev @marko/testing-library
```

--------------------------------

### Install with Yarn

Source: https://testing-library.com/docs/ecosystem-cli-testing-library/

Install cli-testing-library as a dev dependency using Yarn.

```bash
yarn add --dev cli-testing-library
```

--------------------------------

### Install riot-testing-library with npm

Source: https://testing-library.com/docs/ecosystem-riot-testing-library/

Install riot-testing-library as a dev dependency using npm.

```bash
npm install --save-dev riot-testing-library
```

--------------------------------

### Install riot-testing-library with Yarn

Source: https://testing-library.com/docs/ecosystem-riot-testing-library/

Install riot-testing-library as a dev dependency using Yarn.

```bash
yarn add --dev riot-testing-library
```

--------------------------------

### ByText usage examples in different frameworks

Source: https://testing-library.com/docs/queries/bytext/

Examples of using getByText with /about/i in Native, React, Angular, and Cypress. Each example shows the framework-specific import and usage.

```js
import {screen} from '@testing-library/dom'

const aboutAnchorNode = screen.getByText(/about/i)
```

```jsx
import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const aboutAnchorNode = screen.getByText(/about/i)
```

```ts
import {render, screen} from '@testing-library/angular'

await render(MyComponent)
const aboutAnchorNode = screen.getByText(/about/i)
```

```js
cy.findByText(/about/i).should('exist')
```

--------------------------------

### Install with Yarn

Source: https://testing-library.com/docs/pptr-testing-library/intro/

Install puppeteer and pptr-testing-library as dev dependencies using Yarn.

```bash
yarn add --dev puppeteer pptr-testing-library
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/pptr-testing-library/intro/

Install puppeteer and pptr-testing-library as dev dependencies using npm.

```bash
npm install --save-dev puppeteer pptr-testing-library
```

--------------------------------

### Install @marko/testing-library with Yarn

Source: https://testing-library.com/docs/marko-testing-library/intro/

Install the library as a dev dependency using Yarn.

```bash
yarn add --dev @marko/testing-library
```

--------------------------------

### Install bs-platform with Yarn

Source: https://testing-library.com/docs/bs-react-testing-library/intro/

Install bs-platform as a dev dependency using Yarn.

```bash
yarn add --dev bs-platform
```

--------------------------------

### Install testing-library-selector with npm

Source: https://testing-library.com/docs/ecosystem-testing-library-selector/

Install the library as a dev dependency using npm.

```bash
npm install --save-dev testing-library-selector
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/testcafe-testing-library/intro/

Install testcafe and @testing-library/testcafe as dev dependencies using npm.

```bash
npm install --save-dev testcafe @testing-library/testcafe
```

--------------------------------

### Install jsdom (npm)

Source: https://testing-library.com/docs/qwik-testing-library/setup/

Install jsdom as a DOM environment for testing.

```bash
npm install --save-dev jsdom
```

--------------------------------

### Install with Yarn

Source: https://testing-library.com/docs/testcafe-testing-library/intro/

Install testcafe and @testing-library/testcafe as dev dependencies using Yarn.

```bash
yarn add --dev testcafe @testing-library/testcafe
```

--------------------------------

### Install bs-platform with npm

Source: https://testing-library.com/docs/bs-react-testing-library/intro/

Install bs-platform as a dev dependency using npm.

```bash
npm install --save-dev bs-platform
```

--------------------------------

### Install react-select-event with npm

Source: https://testing-library.com/docs/ecosystem-react-select-event/

Install react-select-event as a dev dependency using npm.

```bash
npm install --save-dev react-select-event
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/webdriverio-testing-library/intro/

Install the WebdriverIO Testing Library as a dev dependency using npm.

```bash
npm install --save-dev @testing-library/webdriverio
```

--------------------------------

### Install query-extensions with npm

Source: https://testing-library.com/docs/ecosystem-query-extensions/

Install the query-extensions library as a development dependency using npm.

```bash
npm install --save-dev query-extensions
```

--------------------------------

### Install testing-library-selector with Yarn

Source: https://testing-library.com/docs/ecosystem-testing-library-selector/

Install the library as a dev dependency using Yarn.

```bash
yarn add --dev testing-library-selector
```

--------------------------------

### Install with Yarn

Source: https://testing-library.com/docs/webdriverio-testing-library/intro/

Install the WebdriverIO Testing Library as a dev dependency using Yarn.

```bash
yarn add --dev @testing-library/webdriverio
```

--------------------------------

### Install with npm

Source: https://testing-library.com/docs/svelte-testing-library/intro/

Install Svelte Testing Library as a dev dependency using npm.

```bash
npm install --save-dev @testing-library/svelte
```

--------------------------------

### Install query-extensions with Yarn

Source: https://testing-library.com/docs/ecosystem-query-extensions/

Install the query-extensions library as a development dependency using Yarn.

```bash
yarn add --dev query-extensions
```

--------------------------------

### Using userEvent.setup() to simulate keyboard and click

Source: https://testing-library.com/docs/user-event/setup/

Example showing how to create a user instance and use it to simulate pressing Shift and clicking an element with shiftKey.

```javascript
import userEvent from '@testing-library/user-event'

const user = userEvent.setup()

await user.keyboard('[ShiftLeft>]') // Press Shift (without releasing it)
await user.click(element) // Perform a click with `shiftKey: true`
```

--------------------------------

### Install jsdom (Yarn)

Source: https://testing-library.com/docs/qwik-testing-library/setup/

Install jsdom as a DOM environment for testing using Yarn.

```bash
yarn add --dev jsdom
```

--------------------------------

### vitest.setup.ts

Source: https://testing-library.com/docs/qwik-testing-library/setup/

Setup file that configures DOM matchers and Qwik globals. Must run before qdev.ts loads; beforeAll is too late.

```ts
// Configure DOM matchers to work in Vitest
import '@testing-library/jest-dom/vitest'

// This has to run before qdev.ts loads. `beforeAll` is too late
globalThis.qTest = false // Forces Qwik to run as if it was in a Browser
globalThis.qRuntimeQrl = true
globalThis.qDev = true
globalThis.qInspector = false
```

--------------------------------

### Install Angular Testing Library with Yarn

Source: https://testing-library.com/docs/angular-testing-library/intro/

Install Angular Testing Library and @testing-library/dom as dev dependencies using Yarn. Required starting from ATL version 17.

```bash
yarn add --dev @testing-library/angular @testing-library/dom
```

--------------------------------

### setupBrowser basic usage

Source: https://testing-library.com/docs/webdriverio-testing-library/intro/

Import setupBrowser and use getByText to find and click a button. All queries are async and bound to document.body by default.

```javascript
import {setupBrowser} from '@testing-library/webdriverio'

it('can click button', async () => {
  const {getByText} = setupBrowser(browser)

  const button = await getByText('Button Text')
  await button.click()

  expect(await button.getText()).toEqual('Button Clicked')
})
```

--------------------------------

### Install Angular Testing Library with npm

Source: https://testing-library.com/docs/angular-testing-library/intro/

Install Angular Testing Library and its peer dependency @testing-library/dom as dev dependencies using npm. Required starting from ATL version 17.

```bash
npm install --save-dev @testing-library/angular @testing-library/dom
```

--------------------------------

### Inline test with userEvent.setup()

Source: https://testing-library.com/docs/user-event/intro/

Shows how to use userEvent.setup() inline in a test, then use the returned user object to simulate a click. The example includes a comment about importing render and screen from the framework library.

```js
import userEvent from '@testing-library/user-event'

// inlining
test('trigger some awesome feature when clicking the button', async () => {
  const user = userEvent.setup()
  // Import `render` and `screen` from the framework library of your choice.
  // See https://testing-library.com/docs/dom-testing-library/install#wrappers
  render(<MyComponent />)

  await user.click(screen.getByRole('button', {name: /click me!/i}))

  // ...assertions...
})
```

--------------------------------

### Cypress Testing Library usage examples

Source: https://testing-library.com/docs/cypress-testing-library/intro/

Examples from cypress/integration/find.spec.js showing how to use findByRole, findByLabelText, and findByRole inside a form or dialog. Note that get* queries are not supported; use find* queries for retryability.

```javascript
cy.findByRole('button', {name: /Jackie Chan/i}).click()
cy.findByRole('button', {name: /Button Text/i}).should('exist')
cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist')
cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist')

// findByRole _inside_ a form element
cy.get('form')
  .findByRole('button', {name: /Button Text/i})
  .should('exist')
cy.findByRole('dialog').within(() => {
  cy.findByRole('button', {name: /confirm/i})
})
```

--------------------------------

### setup(options?: Options): UserEvent

Source: https://testing-library.com/docs/user-event/setup/

Creates a new user-event instance with the given options. The instance methods share input device state, allowing for realistic consecutive interactions.

```APIDOC
## setup(options?: Options): UserEvent

### Description
Starts a new user-event session, applying workarounds to the document and returning a UserEvent instance. Methods on this instance share input device state (e.g., which keys are pressed).

### Method
setup

### Parameters
- **options** (Options) - Optional - Configuration options for the user-event instance.

### Returns
- **UserEvent** - An instance with methods for simulating user interactions.

### Example
```js
import userEvent from '@testing-library/user-event'

const user = userEvent.setup()

await user.keyboard('[ShiftLeft>]') // Press Shift (without releasing it)
await user.click(element) // Perform a click with `shiftKey: true`
```

### Notes
- The instance exposes another `.setup()` API that allows configuring another instance sharing the same input device state.
- `userEvent.setup()` replaces `window.navigator.clipboard` with a stub to enable clipboard testing outside secure contexts.
```

--------------------------------

### React Testing Library fireEvent.change example with CostInput component

Source: https://testing-library.com/docs/example-input-event/

Full example showing how to test a currency input component using fireEvent.change. Includes the component, setup function, and multiple test cases verifying dollar sign handling, letter rejection, and deletion.

```jsx
import React, {useState} from 'react'
import {screen, render, fireEvent} from '@testing-library/react'

function CostInput() {
  const [value, setValue] = useState('')

  const removeDollarSign = value => (value[0] === '$' ? value.slice(1) : value)
  const getReturnValue = value => (value === '' ? '' : `$${value}`)

  const handleChange = ev => {
    ev.preventDefault()
    const inputtedValue = ev.currentTarget.value
    const noDollarSign = removeDollarSign(inputtedValue)
    if (isNaN(noDollarSign)) return
    setValue(getReturnValue(noDollarSign))
  }

  return <input value={value} aria-label="cost-input" onChange={handleChange} />
}

const setup = () => {
  const utils = render(<CostInput />)
  const input = screen.getByLabelText('cost-input')
  return {
    input,
    ...utils,
  }
}

test('It should keep a $ in front of the input', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '23'}})
  expect(input.value).toBe('$23')
})
test('It should allow a $ to be in the input when the value is changed', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '$23.0'}})
  expect(input.value).toBe('$23.0')
})

test('It should not allow letters to be inputted', () => {
  const {input} = setup()
  expect(input.value).toBe('') // empty before
  fireEvent.change(input, {target: {value: 'Good Day'}})
  expect(input.value).toBe('') //empty after
})

test('It should allow the $ to be deleted', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '23'}})
  expect(input.value).toBe('$23') // need to make a change so React registers "" as a change
  fireEvent.change(input, {target: {value: ''}})
  expect(input.value).toBe('')
})
```

--------------------------------

### Qwikstart: Test Counter component with qwik-testing-library

Source: https://testing-library.com/docs/qwik-testing-library/example/

Minimal setup for testing a Qwik component. Imports render, screen, waitFor from @noma.to/qwik-testing-library and userEvent from @testing-library/user-event. Renders the Counter, clicks the increment button twice, and asserts the count is 2.

```tsx
// import qwik-testing methods
import {screen, render, waitFor} from '@noma.to/qwik-testing-library'
// import the userEvent methods to interact with the DOM
import {userEvent} from '@testing-library/user-event'
// import the component to be tested
import {Counter} from './counter'

// describe the test suite
describe('<Counter />', () => {
  // describe the test case
  it('should increment the counter', async () => {
    // setup user event
    const user = userEvent.setup()
    // render the component into the DOM
    await render(<Counter />)

    // retrieve the 'increment count' button
    const incrementBtn = screen.getByRole('button', {name: /increment count/})
    // click the button twice
    await user.click(incrementBtn)
    await user.click(incrementBtn)

    // assert that the counter is now 2
    expect(await screen.findByText(/count:2/)).toBeInTheDocument()
  })
})
```

--------------------------------

### Query list items by role and index

Source: https://testing-library.com/docs/dom-testing-library/faq/

Use getAllByRole to query the 'listitem' role and access a specific index. This example shows how to get the third item from a rendered list.

```javascript
const items = [
  /* your items */
]
const {container} = render(/* however you render this stuff */)
const thirdItem = getAllByRole(container, 'listitem')[2]
```

--------------------------------

### Angular: within() with getByText

Source: https://testing-library.com/docs/dom-testing-library/api-within/

Use `within` from `@testing-library/angular` to query within a rendered component. The example renders a component, gets the element with text 'messages', and then finds 'hello' within it.

```typescript
import {render, within} from '@testing-library/angular'

const {getByText} = await render(MyComponent)
const messages = getByText('messages')
const helloMessage = within(messages).getByText('hello')
```

--------------------------------

### Install @noma.to/qwik-testing-library and @testing-library/dom (npm)

Source: https://testing-library.com/docs/qwik-testing-library/setup/

Install the core testing library and its peer dependency as devDependencies using npm.

```bash
npm install --save-dev @noma.to/qwik-testing-library @testing-library/dom
```

--------------------------------

### React: within() with getByText

Source: https://testing-library.com/docs/dom-testing-library/api-within/

Use `within` from `@testing-library/react` to query within a rendered component. The example renders a component, gets the element with text 'messages', and then finds 'hello' within it.

```jsx
import {render, within} from '@testing-library/react'

const {getByText} = render(<MyComponent />)
const messages = getByText('messages')
const helloMessage = within(messages).getByText('hello')
```

--------------------------------

### Install @noma.to/qwik-testing-library and @testing-library/dom (Yarn)

Source: https://testing-library.com/docs/qwik-testing-library/setup/

Install the core testing library and its peer dependency as devDependencies using Yarn.

```bash
yarn add --dev @noma.to/qwik-testing-library @testing-library/dom
```

--------------------------------

### Native DOM: within() with getByText

Source: https://testing-library.com/docs/dom-testing-library/api-within/

Use `within` from `@testing-library/dom` to query for text within a specific element. The example gets the element with id 'messages' and then finds the text 'hello' within it.

```javascript
import {within} from '@testing-library/dom'

const messages = document.getElementById('messages')
const helloMessage = within(messages).getByText('hello')
```

--------------------------------

### Use jest-dom matchers in a test

Source: https://testing-library.com/docs/ecosystem-jest-dom/

Example test using jest-dom matchers toBeEmptyDOMElement and toBeVisible. Note: use query functions like queryByTestId instead of get functions to avoid errors before assertions.

```jsx
import {screen} from '@testing-library/dom'

test('uses jest-dom', () => {
  document.body.innerHTML = `
    <span data-testid="not-empty"><span data-testid="empty"></span></span>
    <div data-testid="visible">Visible Example</div>
  `

  expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
  expect(screen.getByText('Visible Example')).toBeVisible()
})
```

--------------------------------

### render and fireEvent example

Source: https://testing-library.com/docs/react-testing-library/cheatsheet/

Shows how to use render, fireEvent, and screen to load items and wait for async updates.

```jsx
import {render, fireEvent, screen} from '@testing-library/react'

test('loads items eventually', async () => {
  render(<Page />)

  // Click button
  fireEvent.click(screen.getByText('Load'))

  // Wait for page to update with query text
  const items = await screen.findAllByText(/Item #[0-9]: /)
  expect(items).toHaveLength(10)
})
```

--------------------------------

### Use jasmine-dom matchers in a test

Source: https://testing-library.com/docs/ecosystem-jasmine-dom/

Example showing how to use jasmine-dom matchers like toBeEmptyDOMElement and toBeVisible. Note: use query functions like queryByTestId instead of get functions to avoid errors before assertions.

```jsx
<span data-testid="not-empty"><span data-testid="empty"></span></span>
<div data-testid="visible">Visible Example</div>

expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
expect(screen.getByText('Visible Example')).toBeVisible()
```

--------------------------------

### Mock API with setupServer and Test Error Scenario

Source: https://testing-library.com/docs/react-testing-library/example-intro/

Declares API request handlers with MSW's setupServer, sets up lifecycle hooks (beforeAll, afterEach, afterAll), and shows how to override a handler to simulate a server error.

```js
// declare which API requests to mock
const server = setupServer(
  // capture "GET /greeting" requests
  http.get('/greeting', (req, res, ctx) => {
    // respond using a mocked JSON body
    return HttpResponse.json({greeting: 'hello there'})
  }),
)

// establish API mocking before all tests
beforeAll(() => server.listen())
// reset any request handlers that are declared as a part of our tests
// (i.e. for testing one-time error scenarios)
afterEach(() => server.resetHandlers())
// clean up once the tests are done
afterAll(() => server.close())

// ...

test('handles server error', async () => {
  server.use(
    // override the initial "GET /greeting" request handler
    // to return a 500 Server Error
    http.get('/greeting', (req, res, ctx) => {
      return new HttpResponse(null, {status: 500})
    }),
  )

  // ...
})
```

--------------------------------

### Failing getByText query with automatic DOM logging

Source: https://testing-library.com/docs/dom-testing-library/api-debugging/

When a get or find query fails, the current state of the container is printed to the console. This example shows a getByText call that will fail because the text 'Goodbye world' is not present, triggering the automatic logging.

```javascript
// <div>Hello world</div>
getByText(container, 'Goodbye world') // will fail by throwing error
```

--------------------------------

### Query elements using regular DOM methods

Source: https://testing-library.com/docs/dom-testing-library/faq/

Use these DOM methods to query elements off the container when you don't want to use data-testid attributes. The example shows how to get the first li inside a div, all li elements inside a div, and the root element.

```javascript
const firstLiInDiv = container.querySelector('div li')
const allLisInDiv = container.querySelectorAll('div li')
const rootElement = container.firstChild
```

--------------------------------

### Direct APIs

Source: https://testing-library.com/docs/user-event/setup/

Calling APIs directly on the default export, which internally calls setup() and uses the method on the instance. Recommended for simple tests or transitioning to version 14.

```APIDOC
## Direct APIs

### Description
You can call the APIs directly on the default export. This will call `setup` internally and then use the method on the instance.

### Usage
```js
import userEvent from '@testing-library/user-event'

// Direct call, e.g., userEvent.click(element)
await userEvent.click(element)
```

### Notes
- This exists to ease the transition to version 14 and writing simple tests.
- Using the methods on the instances returned by `userEvent.setup()` is recommended.
```

--------------------------------

### Install @testing-library/nightwatch with Yarn

Source: https://testing-library.com/docs/nightwatch-testing-library/intro/

Install the library as a dev dependency using Yarn. Requires Nightwatch to be installed and configured first.

```bash
yarn add --dev @testing-library/nightwatch
```

--------------------------------

### routes option example

Source: https://testing-library.com/docs/angular-testing-library/api/

Set up the router service via RouterTestingModule.withRoutes. Provide a route configuration with declarations for child components.

```typescript
await render(AppComponent, {
  declarations: [ChildComponent],
  routes: [
    {
      path: '',
      children: [
        {
          path: 'child/:id',
          component: ChildComponent,
        },
      ],
    },
  ],
})
```

--------------------------------

### Install @testing-library/nightwatch with npm

Source: https://testing-library.com/docs/nightwatch-testing-library/intro/

Install the library as a dev dependency using npm. Requires Nightwatch to be installed and configured first.

```bash
npm install --save-dev @testing-library/nightwatch
```

--------------------------------

### Install React Testing Library and jest-dom with npm

Source: https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/

Install the required packages using npm. This command installs @testing-library/react and @testing-library/jest-dom as dev dependencies.

```bash
npm install --save-dev @testing-library/react @testing-library/jest-dom
```

--------------------------------

### Test example with render and screen

Source: https://testing-library.com/docs/marko-testing-library/api/

Shows a test that renders a Greeting component with input, asserts text via screen, and checks the container snapshot.

```javascript
import {render, screen} from '@marko/testing-library'
import Greeting from './greeting.marko'

test('renders a message', async () => {
  const {container} = await render(Greeting, {name: 'Marko'})
  expect(screen.getByText(/Marko/)).toBeInTheDocument()
  expect(container.firstChild).toMatchInlineSnapshot(`
    <h1>Hello, Marko!</h1>
  `)
})
```

--------------------------------

### Install @solidjs/testing-library with npm

Source: https://testing-library.com/docs/solid-testing-library/intro/

Install the Solid Testing Library as a dev dependency using npm.

```bash
npm install --save-dev @solidjs/testing-library
```

--------------------------------

### Install Jest dependencies with Yarn

Source: https://testing-library.com/docs/svelte-testing-library/setup/

Install the same dependencies using Yarn.

```bash
yarn add --dev \
  @testing-library/svelte \
  @testing-library/jest-dom \
  svelte-jester \
  jest \
  jest-environment-jsdom
```

--------------------------------

### Configure jest-setup.js

Source: https://testing-library.com/docs/svelte-testing-library/setup/

Create a jest-setup.js file to import @testing-library/jest-dom for custom matchers.

```ts
import '@testing-library/jest-dom'
```

--------------------------------

### Annotated quickstart test for Fetch component

Source: https://testing-library.com/docs/react-testing-library/example-intro/

Same test as the quickstart but with comments explaining each line. Includes imports, render, userEvent.click, findByRole, and assertions with jest-dom matchers.

```jsx
// import react-testing methods
import {render, screen} from '@testing-library/react'
// userEvent library simulates user interactions by dispatching the events that would happen if the interaction took place in a browser.
import userEvent from '@testing-library/user-event'
// add custom jest matchers from jest-dom
import '@testing-library/jest-dom'
// the component to test
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // Render a React element into the DOM
  render(<Fetch url="/greeting" />)

  await userEvent.click(screen.getByText('Load Greeting'))
  // wait before throwing an error if it cannot find an element
  await screen.findByRole('heading')

  // assert that the alert message is correct using
  // toHaveTextContent, a custom matcher from jest-dom.
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})
```

--------------------------------

### getByLabelText example - Angular

Source: https://testing-library.com/docs/queries/bylabeltext/

Example using @testing-library/angular with render and screen.getByLabelText.

```typescript
import {render, screen} from '@testing-library/angular'

await render(Login)

const inputNode = screen.getByLabelText('Username')
```
Tokens:
Raw