docs: add a recommendation block for msw

Author: kettanaito

docs/react-testing-library/example-intro.md

@@ -39,6 +39,10 @@ test('loads and displays greeting', async () => {
 })
 ```
 
+> We recommend using [Mock Service Worker](https://github.com/mswjs/msw) library
+> to declaratively mock API communication in your tests instead of stubbing
+> `window.fetch`, or relying on third-party adapters.
+
 ---
 
 ## Step-By-Step
@@ -50,7 +54,6 @@ test('loads and displays greeting', async () => {
 import React from 'react'
 
 // import API mocking utilities from Mock Service Worker
-// (see https://github.com/mswjs/msw)
 import { rest } from 'msw'
 import { setupServer } from 'msw/node'
 
@@ -61,7 +64,22 @@ import { render, fireEvent, waitFor, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 // the component to test
 import Fetch from '../fetch'
+```
+
+```jsx
+test('loads and displays greeting', async () => {
+  // Arrange
+  // Act
+  // Assert
+})
+```
 
+### Mock
+
+Use the `setupServer` function from `msw` to mock an API request that our tested
+component makes.
+
+```js
 // declare which API requests to mock
 const server = setupServer(
   // capture "GET /greeting" requests
@@ -77,14 +95,6 @@ beforeAll(() => server.listen())
 afterAll(() => server.close())
 ```
 
-```jsx
-test('loads and displays greeting', async () => {
-  // Arrange
-  // Act
-  // Assert
-})
-```
-
 ### Arrange
 
 The [`render`](./api#render) method renders a React element into the DOM and