@@ -255,6 +255,7 @@ describe('PhoneBook', () => {
255
255
expect (await screen .findByText (/ my favorites/ i )).toBeOnTheScreen ();
256
256
expect (await screen .findAllByLabelText (' favorite-contact-avatar' )).toHaveLength (3 );
257
257
});
258
+ });
258
259
259
260
const DATA: { results: User [] } = {
260
261
results: [
@@ -337,8 +338,8 @@ describe('PhoneBook', () => {
337
338
338
339
## Global guarding against unwanted API requests
339
340
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
342
343
move MSW ' s server management from `PhoneBook.test.tsx` to Jest' s setup file via [` setupFilesAfterEnv ` ](https :// jestjs.io/docs/configuration#setupfilesafterenv-array).
343
344
344
345
` ` ` 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
362
363
363
364
## Conclusion
364
365
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
367
371
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.
371
374
372
375
## Further Reading and Alternatives
373
376
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 :
375
378
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