Skip to content

docs: Fixed example code to use "screen" #553

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 1 commit into from
Dec 17, 2019
Merged

docs: Fixed example code to use "screen" #553

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
28 changes: 15 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,25 +175,23 @@ import '@testing-library/jest-dom/extend-expect'
// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required

import React from 'react'
import {render, fireEvent} from '@testing-library/react'
import {render, fireEvent, screen} from '@testing-library/react'
import HiddenMessage from '../hidden-message'

test('shows the children when the checkbox is checked', () => {
const testMessage = 'Test Message'
const {queryByText, getByLabelText, getByText} = render(
<HiddenMessage>{testMessage}</HiddenMessage>,
)
render(<HiddenMessage>{testMessage}</HiddenMessage>)

// query* functions will return the element or null if it cannot be found
// get* functions will return the element or throw an error if it cannot be found
expect(queryByText(testMessage)).toBeNull()
expect(screen.queryByText(testMessage)).toBeNull()

// the queries can accept a regex to make your selectors more resilient to content tweaks and changes.
fireEvent.click(getByLabelText(/show/i))
fireEvent.click(screen.getByLabelText(/show/i))

// .toBeInTheDocument() is an assertion that comes from jest-dom
// otherwise you could use .toBeDefined()
expect(getByText(testMessage)).toBeInTheDocument()
expect(screen.getByText(testMessage)).toBeInTheDocument()
})
```

Expand Down Expand Up @@ -265,7 +263,7 @@ export default Login
// your testing framework configuration rather than importing them in every file.
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import {render, fireEvent} from '@testing-library/react'
import {render, fireEvent, screen} from '@testing-library/react'
import Login from '../login'

test('allows the user to login successfully', async () => {
Expand All @@ -277,17 +275,21 @@ test('allows the user to login successfully', async () => {
})
})

const {getByLabelText, getByText, findByRole} = render(<Login />)
render(<Login />)

// fill out the form
fireEvent.change(getByLabelText(/username/i), {target: {value: 'chuck'}})
fireEvent.change(getByLabelText(/password/i), {target: {value: 'norris'}})
fireEvent.change(screen.getByLabelText(/username/i), {
target: {value: 'chuck'},
})
fireEvent.change(screen.getByLabelText(/password/i), {
target: {value: 'norris'},
})

fireEvent.click(getByText(/submit/i))
fireEvent.click(screen.getByText(/submit/i))

// just like a manual tester, we'll instruct our test to wait for the alert
// to show up before continuing with our assertions.
const alert = await findByRole('alert')
const alert = await screen.findByRole('alert')

// .toHaveTextContent() comes from jest-dom's assertions
// otherwise you could use expect(alert.textContent).toMatch(/congrats/i)
Expand Down