docs(cookbook): network requests recipes #1655

vanGalilea · 2024-08-28T05:30:41Z

Summary

As part of our RNTL Cookbook serie I've composed 'Network Request' recipes for fetch & Axios

Test plan

Sanity check Cookbook app

Run the Cookbook app > Click on "Phonebook.."
Verify rendering of contact and favorites list

Sanity check recipes docs

Run the website app
Ensure you can navigate to "Network Requests Recipes"
Read and review "Axios" & "Fetch" recipes

Visuals

iOS	Android

Possible spin offs

Add an 'msw' recipe under the "Network Requests Recipes" sec.

vanGalilea · 2024-08-28T05:31:32Z

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

+
+jest.mock('axios');
+
+jest.setTimeout(10000);


When this test suit runs in CI, the default 5s is not sufficient.
Locally it's a matter of 0.91 s.

Any idea what might be causing this on CI? @mdjastrzebski?

According to my measuring:

renders an empty task list ran in 6612ms PhoneBook fetches contacts successfully and renders in list ran in 7190ms Top 8 slowest examples (14.071 seconds, 100.0% of total time): PhoneBook fetches contacts successfully and renders in list 7.19 seconds ./app/network-requests/__tests__/PhoneBook.test.tsx renders an empty task list 6.612 seconds ./app/state-management/jotai/__tests__/TaskList.test.tsx renders WelcomeScreen in light theme 0.078 seconds ./app/custom-render/__tests__/index.test.tsx PhoneBook fetches favorites successfully and renders all users avatars 0.0[5](https://github.com/callstack/react-native-testing-library/actions/runs/10590927775/job/29347478417?pr=1655#step:6:6)6 seconds ./app/network-requests/__tests__/PhoneBook.test.tsx PhoneBook fails to fetch contacts and renders error message 0.052 seconds ./app/network-requests/__tests__/PhoneBook.test.tsx PhoneBook fails to fetch favorites and renders error message 0.052 seconds ./app/network-requests/__tests__/PhoneBook.test.tsx renders a to do list with 1 items initially, and adds a new item 0.02[6](https://github.com/callstack/react-native-testing-library/actions/runs/10590927775/job/29347478417?pr=1655#step:6:7) seconds ./app/state-management/jotai/__tests__/TaskList.test.tsx renders WelcomeScreen in dark theme 0.005 seconds ./app/custom-render/__tests__/index.test.tsx

It seems like the spec. tests "renders an empty task list" and "PhoneBook fetches contacts successfully and renders in list" are the slowest as they're the 1st tests in the file 🤷🏻

codecov · 2024-08-28T05:32:44Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.20%. Comparing base (a282d1e) to head (d7acda3).
Report is 71 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1655      +/-   ##
==========================================
- Coverage   95.51%   95.20%   -0.31%     
==========================================
  Files          99       99              
  Lines        5400     5553     +153     
  Branches      857      875      +18     
==========================================
+ Hits         5158     5287     +129     
- Misses        242      266      +24

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

examples/cookbook/__mocks__/axios.ts

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

mdjastrzebski

Thank you for contributing this PR. Mocking network requests is an essential part of each RN app, so having a clear recipe should really benefit our users.

When mocking fetch or Axios they way you did it, by mocking get/post methods there is an issue where there are 2+ API calls using the same verb and serving proper response based on the URL and/or request body. It seems that the current version of the PR skips this problem by handing two API calls separate, one through fetch and other through axios, while beneficial to showcase these two popopular approaches, it does not show to the user how to solve it.

@pierrezimmermannbam mentioned MSW, which has an elegant solution for this with it's request to response map:

Based on this article by Kent C. Dodds, I think mocking fetch is suboptimal and we should explore msw as a primary approach.

examples/cookbook/__mocks__/axios.ts

examples/cookbook/app/network-requests/__tests__/test-utils.ts

…eout

mdjastrzebski · 2024-09-10T13:10:54Z

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

+} from './test-utils';
+
+describe('PhoneBook', () => {
+  it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {


should the be a mock call here? Seems like the timeout might be caused by different test order execution between the test runs locally and on the CI.

mdjastrzebski · 2024-09-10T13:15:49Z

examples/cookbook/app/network-requests/PhoneBook.tsx

+  const [favoritesData, setFavoritesData] = useState<User[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {


thinking out loud, perhaps we should showcase usage with TanStack Query instead of manual promise fetching. Implementing data fetching using useEffect to avoid race conditions is verbose. Wdyt @vanGalilea ?

Showcase is a very good idea, as it is become and industry standard the last years.
With my approach I intended to keep things more straight-forward.

Let me add it up, this week 👍🏻 In the meanwhile, you can review the rest ;)

examples/cookbook/app/network-requests/__tests__/test-utils.ts

mdjastrzebski

Looks good! Great work @vanGalilea.

Do you want to change anything or can we merge it and publish?

vanGalilea · 2024-09-18T05:09:48Z

Looks good! Great work @vanGalilea.

Do you want to change anything or can we merge it and publish?

Let's merge and I might add Tanstack in the near future to it.

Thanks for the extensive review and thinking along 👍🏻

squash prev commits

19dd3bc

vanGalilea commented Aug 28, 2024

View reviewed changes

stevegalili added 4 commits August 28, 2024 07:36

remove unneeded axios mock

35a9e9e

set maxWorkers=2

81e7462

run with a slow test reporter

2c33c44

revert: run with a slow test reporter

5a5cab2

pierrezimmermannbam reviewed Aug 29, 2024

View reviewed changes

examples/cookbook/__mocks__/axios.ts Outdated Show resolved Hide resolved

pierrezimmermannbam reviewed Aug 29, 2024

View reviewed changes

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx Outdated Show resolved Hide resolved

Add url check to mock and further reading and alternatives

4a2fb86

vanGalilea requested a review from pierrezimmermannbam August 30, 2024 06:39

mdjastrzebski requested changes Sep 3, 2024

View reviewed changes

examples/cookbook/__mocks__/axios.ts Outdated Show resolved Hide resolved

examples/cookbook/app/network-requests/__tests__/test-utils.ts Outdated Show resolved Hide resolved

vanGalilea marked this pull request as draft September 3, 2024 16:08

vanGalilea and others added 4 commits September 9, 2024 08:21

Merge branch 'callstack:main' into docs/cookbook/net-reqs

7fa6eb0

use MSW for all API calls in cookbook test suits

336c00e

Comments with implem. explanation

f253045

Arrange docs initially to reflect new scenario and remove jest.setTim…

ba36a0f

…eout

mdjastrzebski reviewed Sep 10, 2024

View reviewed changes

examples/cookbook/app/network-requests/__tests__/test-utils.ts Show resolved Hide resolved

mdjastrzebski reviewed Sep 10, 2024

View reviewed changes

examples/cookbook/app/network-requests/__tests__/test-utils.ts Show resolved Hide resolved

stevegalili added 3 commits September 14, 2024 06:08

updating docs (1)

5d55fcd

updating docs (2)

ded40d1

updating docs with global guarding and conclusion

d7acda3

vanGalilea marked this pull request as ready for review September 16, 2024 06:26

vanGalilea requested a review from mdjastrzebski September 16, 2024 06:44

mdjastrzebski approved these changes Sep 17, 2024

View reviewed changes

mdjastrzebski merged commit bd98be0 into callstack:main Sep 18, 2024
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(cookbook): network requests recipes #1655

docs(cookbook): network requests recipes #1655

vanGalilea commented Aug 28, 2024 •

edited

Loading

vanGalilea Aug 28, 2024

vanGalilea Aug 28, 2024

vanGalilea Aug 28, 2024

codecov bot commented Aug 28, 2024 •

edited

Loading

mdjastrzebski left a comment

mdjastrzebski Sep 10, 2024

mdjastrzebski Sep 10, 2024

vanGalilea Sep 16, 2024

vanGalilea Sep 16, 2024

mdjastrzebski left a comment

vanGalilea commented Sep 18, 2024


		jest.mock('axios');

		jest.setTimeout(10000);

docs(cookbook): network requests recipes #1655

docs(cookbook): network requests recipes #1655

Conversation

vanGalilea commented Aug 28, 2024 • edited Loading

Summary

Test plan

Sanity check Cookbook app

Sanity check recipes docs

Visuals

Possible spin offs

vanGalilea Aug 28, 2024

Choose a reason for hiding this comment

vanGalilea Aug 28, 2024

Choose a reason for hiding this comment

vanGalilea Aug 28, 2024

Choose a reason for hiding this comment

codecov bot commented Aug 28, 2024 • edited Loading

Codecov Report

mdjastrzebski left a comment

Choose a reason for hiding this comment

mdjastrzebski Sep 10, 2024

Choose a reason for hiding this comment

mdjastrzebski Sep 10, 2024

Choose a reason for hiding this comment

vanGalilea Sep 16, 2024

Choose a reason for hiding this comment

vanGalilea Sep 16, 2024

Choose a reason for hiding this comment

mdjastrzebski left a comment

Choose a reason for hiding this comment

vanGalilea commented Sep 18, 2024

vanGalilea commented Aug 28, 2024 •

edited

Loading

codecov bot commented Aug 28, 2024 •

edited

Loading