diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 7254a0f68..a6d429ab1 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -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() + + // 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() + +}) +``` + +
+ Quickstart (Annotated Example) + + ```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() + + 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() + + }) + ``` + +
+ + ## Full Example See the following sections for a detailed breakdown of the test