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.

Sign up for GitHub

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

Add quickstart example #1140

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b20b50a
Add quickstart example
kostasx Aug 15, 2022
b96ab69
Update based on PR recommendations & comments
kostasx Aug 17, 2022
0a54b10
Revert settings.json changes
kostasx Aug 17, 2022
7f2ed47
Update userEvent.setup with minimal and annotated versions
kostasx Aug 17, 2022
662f56c
Update quickstart example
kostasx Aug 17, 2022
abd59e4
Update quickstart example
kostasx Aug 17, 2022
4be0d8c
Update quickstart example
kostasx Aug 17, 2022
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update quickstart example
  • Loading branch information
@kostasx
kostasx committed Aug 17, 2022
commit 662f56c139069d389285cd0096f8fae20324c5f4
27 changes: 11 additions & 16 deletions docs/react-testing-library/example-intro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,24 @@ sidebar_label: Example

## Quickstart

This is a minimal setup to get you started.
This is a very simple 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, waitFor, screen} from '@testing-library/react'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import Fetch from '../fetch'

const setup = (jsx)=> ({ user: userEvent.setup(), ...render(jsx) })
import Fetch from './fetch'

test('loads and displays greeting', async () => {

// ARRANGE
const { user } = setup(<Fetch url="/greeting" />)
render(<Fetch url="/greeting" />)

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

// ASSERT
Expand All @@ -40,23 +38,20 @@ test('loads and displays greeting', async () => {

```jsx
// import react-testing methods
import {render, waitFor, screen} from '@testing-library/react'
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'

// Apply workarounds and mock the UI layer to simulate user interactions
// like they would happen in the browser
const setup = (jsx)=> ({ user: userEvent.setup(), ...render(jsx) })
import Fetch from './fetch'

test('loads and displays greeting', async () => {

// Run the UI setup and render a React element into the DOM
const { user } = setup(<Fetch url="/greeting" />)
// Render a React element into the DOM
render(<Fetch url="/greeting" />)

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

Expand Down