diff --git a/README.md b/README.md
index f309091b..ef63ddb3 100644
--- a/README.md
+++ b/README.md
@@ -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(
- {testMessage},
- )
+ render({testMessage})
// 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()
})
```
@@ -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 () => {
@@ -277,17 +275,21 @@ test('allows the user to login successfully', async () => {
})
})
- const {getByLabelText, getByText, findByRole} = render()
+ render()
// 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)