Skip to content

Commit d7acda3

Browse files
author
stevegalili
committed
updating docs with global guarding and conclusion
1 parent ded40d1 commit d7acda3

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

website/docs/12.x/cookbook/advanced/network-requests.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ describe('PhoneBook', () => {
255255
expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
256256
expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
257257
});
258+
});
258259

259260
const DATA: { results: User[] } = {
260261
results: [
@@ -337,8 +338,8 @@ describe('PhoneBook', () => {
337338

338339
## Global guarding against unwanted API requests
339340

340-
As mistakes may happen, we might forget to mock an API request in one of our tests in the future.
341-
To prevent we make unwanted API requests, and alert the developer when it happens, we can choose to
341+
As mistakes may happen, we might forget to mock a network request in one of our tests in the future.
342+
To prevent us from happening, and alert when a certain network request is left unhandled, you may choose to
342343
move MSW's server management from `PhoneBook.test.tsx` to Jest's setup file via [`setupFilesAfterEnv`](https://jestjs.io/docs/configuration#setupfilesafterenv-array).
343344

344345
```tsx title=examples/cookbook/jest-setup.ts
@@ -362,18 +363,18 @@ Which will result in a warning in the console if you forget to mock an API reque
362363

363364
## Conclusion
364365

365-
Testing a component that makes network requests with Axios is straightforward. By mocking the Axios
366-
requests, we can control the data that is returned and test how our application behaves in different
366+
Testing a component that makes network requests in combination with MSW takes some initial preparation to configure and describe the overridden networks.
367+
We can achieve that by using MSW's request handlers and intercepting APIs.
368+
369+
Once up and running we gain full grip over the network requests, their responses, statuses.
370+
Doing so is crucial to be able to test how our application behaves in different
367371
scenarios, such as when the request is successful or when it fails.
368-
There are many ways to mock Axios requests, and the method you choose will depend on your specific
369-
use case. In this guide, we showed you how to mock Axios requests using Jest's `jest.mock` function
370-
and how to guard against unwanted API requests throughout your test suite.
372+
373+
When global configuration is in place, MSW's will also warn us when an unhandled network requests has occurred throughout a test suite.
371374

372375
## Further Reading and Alternatives
373376

374-
Explore more powerful tools for mocking network requests in your React Native application:
377+
Explore more advanced scenarios for mocking network requests with MSW:
375378

376-
- [Axios Mock Adapter](https://github.com/ctimmerm/axios-mock-adapter): A popular library for
377-
mocking Axios calls with an extensive API, making it easy to simulate various scenarios.
378-
- [MSW (Mock Service Worker)](https://mswjs.io/): Great for spinning up a local test server that
379-
intercepts network requests at the network level, providing end-to-end testing capabilities.
379+
- MSW's Basics - [Intercepting requests](https://mswjs.io/docs/basics/intercepting-requests) and/or [Mocking responses](https://mswjs.io/docs/basics/mocking-responses)
380+
- MSW's Network behavior - how to describe [REST](https://mswjs.io/docs/network-behavior/rest) and/or [GraphQL](https://mswjs.io/docs/network-behavior/graphql) APIs

0 commit comments

Comments
 (0)