Update based on PR recommendations & comments

Author: kostasx

.vscode/settings.json

@@ -5,5 +5,8 @@
   ],
   "files.associations": {
     "*.md": "mdx"
-  }
+  },
+  "githubPullRequests.ignoredPullRequestBranches": [
+    "main"
+  ]
 }

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(<Fetch url="/greeting" />)
+  const { user } = setup(<Fetch url="/greeting" />)
 
   // 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(<Fetch url="/greeting" />)
+    // Run the UI setup and render a React element into the DOM
+    const { user } = setup(<Fetch url="/greeting" />)
 
-    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.