React Hooks SWR: Test components that useSWR - Mock Service Worker - React.js Testing Tutorial #7

In this tutorial we are going to learn how to test components that useSWR.

----
----
----
Join the channel to support my content:
-----
-----
-----
Timeline:
00:00 Introduction
00:28 Demo
00:55 Install Packages
01:22 Setup MSW
03:52 France Tests
05:05 MSW Dynamic Parameters
06:05 useSWR Cache Problems in tests
10:59 MSW Override a call for a specific test
----

Follow me on:

#jest #ReactTestingLibrary #msw

[Kevin-ywqr]

Hi Bruno, I know i've said this on several of your videos already ... but your videos and content are game-changers for me. It's gotten to the point where if anyone talks about NextJS, SWR, etc. I always include your channel as a resource to learn about the technologies. Also, thank you again for all this testing material. Resources regarding testing have always been hard to come by and your material is as great as always. Huge thanks, you're making a huge positive difference for me and many others.

[vonvetur]

Thanks man. Just had that issue and it took me a while to find out why my tests were failing for no reason. I think SWR should emphasise that in the docs more, as I imagine it's a pretty common scenario.

[janpawedwa]

Too bad that many "beginner" developers ignore testing, because those videos are fantastic! Nice pace, lots of knowledge and great presentation, definitely deserving of more views.

Muito obrigado!

[alimodz]

Very clear explanation, thanks you! and love the clean code tips

[ayushyadav]

Awesome tutorial as always. I have a suggestion for a video. Make a NextJS app with auth and firestore using firebase version 9

[markokraljevic]

I expected you will do an example with React Query too. It's ok to just disable cache in all tests, but app could have additional complex logic with cache manipulation like reusing data, pre-fetching, populating cache in getServerSideProps... I guess that should be tested too?

[waynehuang]

Hi Bruno, thank you for the tutorials! Gave me a great starting point!
I was wondering if you know how to keep the API urls consistent depending on where the tests are executed. In my app, the base url will be set using environment variables and then passed to SWRConfig. How do I structure my mock API base urls so it knows what base url to use depending on whether the test is run locally vs running in the Github actions CI/CD pipeline?

[mahmoudmandor]

Where can i find more details about mySwrConfig file which u are created
I searched about it but not like yours
And just found 1 article on medium but not have many details

[theprantadutta]

Hi Bruno, is this the last tutorial in this series? Also, can we have a cypress example?