Skip to content

Add quickstart example #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 31, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions docs/react-testing-library/example-intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,68 @@ title: Example
sidebar_label: Example
---

## Quickstart

This is a minimal setup to get you started.
If you want to see a description of what each line does,
scroll down to the [annotated version](#quickstart-annotated).
Scroll down to [Full Example](#full-example) to see a more advanced test setup.

```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()

})
```

<details id="quickstart-annotated">
<summary>Quickstart (Annotated Example)</summary>

```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()

})
```

</details>


## Full Example

See the following sections for a detailed breakdown of the test
Expand Down