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)