From ac9b3268027b26ce25dac272de948e87b444fa4d Mon Sep 17 00:00:00 2001 From: mattstobbs Date: Wed, 21 Apr 2021 17:18:16 +0100 Subject: [PATCH 1/2] Update docs to use toBeDisabled() The examples in the docs currently use `.toHaveAttribute('disabled')`. However, jest-dom provides `toBeDisabled()`, which does the same thing but is more expressive and gives a better failure message. --- docs/react-testing-library/example-intro.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index e2ea91ff5..81768ea61 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -35,7 +35,7 @@ test('loads and displays greeting', async () => { await waitFor(() => screen.getByRole('heading')) expect(screen.getByRole('heading')).toHaveTextContent('hello there') - expect(screen.getByRole('button')).toHaveAttribute('disabled') + expect(screen.getByRole('button')).toBeDisabled() }) test('handles server error', async () => { @@ -52,7 +52,7 @@ test('handles server error', async () => { await waitFor(() => screen.getByRole('alert')) expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!') - expect(screen.getByRole('button')).not.toHaveAttribute('disabled') + expect(screen.getByRole('button')).not.toBeDisabled() }) ``` @@ -162,7 +162,7 @@ await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!') // assert that the button is not disabled. -expect(screen.getByRole('button')).not.toHaveAttribute('disabled') +expect(screen.getByRole('button')).not.toBeDisabled() ``` ### System Under Test From 95b6eddc4b8c10ba1e6ddd8b083e3b7abf6ece3d Mon Sep 17 00:00:00 2001 From: mattstobbs Date: Thu, 22 Apr 2021 23:25:02 +0100 Subject: [PATCH 2/2] Add comment descriptions --- docs/react-testing-library/example-intro.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 81768ea61..dc47c71d6 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -158,10 +158,12 @@ await waitFor(() => ### Assert ```jsx -// assert that the alert message is correct. +// assert that the alert message is correct using +// toHaveTextContent, a custom matcher from jest-dom. expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!') -// assert that the button is not disabled. +// assert that the button is not disabled using +// toBeDisabled, a custom matcher from jest-dom. expect(screen.getByRole('button')).not.toBeDisabled() ```