From b20b50aaccb9924a1650396f8ad972fc4d2053ea Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Mon, 15 Aug 2022 16:25:00 +0300 Subject: [PATCH 1/6] Add quickstart example --- docs/react-testing-library/example-intro.mdx | 59 ++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 7254a0f68..b0d4a76c7 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -4,6 +4,65 @@ title: Example sidebar_label: Example --- +## Quickstart + +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, fireEvent, waitFor, screen} from '@testing-library/react' +import '@testing-library/jest-dom' +import Fetch from '../fetch' + +test('loads and displays greeting', async () => { + + // ARRANGE + render() + + // ACT + fireEvent.click(screen.getByText('Load Greeting')) + await waitFor(() => screen.getByRole('heading')) + + // ASSERT + expect(screen.getByRole('heading')).toHaveTextContent('hello there') + expect(screen.getByRole('button')).toBeDisabled() + +}) +``` + +
+ Quickstart (Annotated Example) + + ```jsx + // import react-testing methods + import {render, fireEvent, waitFor, screen} from '@testing-library/react' + // 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() + + fireEvent.click(screen.getByText('Load Greeting')) + // getByRole throws an error if it cannot find an element + await waitFor(() => screen.getByRole('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 From b96ab6936cabbe8b2b650732388f00ca6facf21c Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Thu, 18 Aug 2022 00:58:04 +0300 Subject: [PATCH 2/6] Update based on PR recommendations & comments --- .vscode/settings.json | 5 +++- docs/react-testing-library/example-intro.mdx | 30 +++++++++++++------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 176df8375..1392a8c93 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,8 @@ ], "files.associations": { "*.md": "mdx" - } + }, + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] } diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index b0d4a76c7..2d2de1bb0 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -6,24 +6,27 @@ sidebar_label: Example ## Quickstart -This is a very simple setup to get you started. +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, fireEvent, waitFor, screen} from '@testing-library/react' +import {render, waitFor, 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) }) + test('loads and displays greeting', async () => { // ARRANGE - render() + const { user } = setup() // ACT - fireEvent.click(screen.getByText('Load Greeting')) - await waitFor(() => screen.getByRole('heading')) + await user.click(screen.getByText('Load Greeting')) + await screen.findByRole('heading') // ASSERT expect(screen.getByRole('heading')).toHaveTextContent('hello there') @@ -37,20 +40,25 @@ test('loads and displays greeting', async () => { ```jsx // import react-testing methods - import {render, fireEvent, waitFor, screen} from '@testing-library/react' + import {render, waitFor, screen} from '@testing-library/react' + 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) }) + test('loads and displays greeting', async () => { - // Render a React element into the DOM - render() + // Run the UI setup and render a React element into the DOM + const { user } = setup() - fireEvent.click(screen.getByText('Load Greeting')) - // getByRole throws an error if it cannot find an element - await waitFor(() => screen.getByRole('heading')) + await user.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. From 0a54b10885ae727155f61df8f373159830ad7678 Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Thu, 18 Aug 2022 01:02:35 +0300 Subject: [PATCH 3/6] Revert settings.json changes --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 1392a8c93..176df8375 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,8 +5,5 @@ ], "files.associations": { "*.md": "mdx" - }, - "githubPullRequests.ignoredPullRequestBranches": [ - "main" - ] + } } From 7f2ed47c830844487a2678dd22a7d7f4899b6780 Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Thu, 18 Aug 2022 01:05:05 +0300 Subject: [PATCH 4/6] Update userEvent.setup with minimal and annotated versions --- docs/react-testing-library/example-intro.mdx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 2d2de1bb0..30b0501f5 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -49,7 +49,14 @@ test('loads and displays greeting', async () => { // 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) }) + function setup(jsx) { + return { + // create a user-event instance + user: userEvent.setup(), + // render a React element + ...render(jsx), + } + } test('loads and displays greeting', async () => { From 662f56c139069d389285cd0096f8fae20324c5f4 Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Thu, 18 Aug 2022 01:26:17 +0300 Subject: [PATCH 5/6] Update quickstart example --- docs/react-testing-library/example-intro.mdx | 27 ++++++++------------ 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 2d2de1bb0..61eeba8bf 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -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() + render() // ACT - await user.click(screen.getByText('Load Greeting')) + await userEvent.click(screen.getByText('Load Greeting')) await screen.findByRole('heading') // ASSERT @@ -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() + // Render a React element into the DOM + render() - 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') From 4be0d8c69129cface4f590378ddd38f5772494aa Mon Sep 17 00:00:00 2001 From: Kostas Minaidis Date: Thu, 18 Aug 2022 01:29:20 +0300 Subject: [PATCH 6/6] Update quickstart example --- docs/react-testing-library/example-intro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 61eeba8bf..a6d429ab1 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -6,7 +6,7 @@ sidebar_label: Example ## Quickstart -This is a very simple setup to get you started. +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.