Introduction to Testing: Concepts for Beginners - React.js Testing Tutorial #1

I'll answer the most common questions beginners have before they create their first tests.

We will also talk about the pyramid of testing and some changing concepts in the last decade regarding unit testing vs integration testing vs end to end testing.

----
----
Join the channel to support my content:
----

----
Links to the prints I showed in the video:
----

----
Timestamps:
00:00 Introduction
00:52 Testing Strategies
01:00 End to End (E2E) explanation
01:35 Integration explanation (short)
01:43 What is a unit in unit testing?
02:01 Kent C Dodds take on unit vs integation vs e2e
02:43 Real world example of how different teams can have different abrastraction levels regarding testing strategies
04:52 What is mocking? Why is it useful?
05:58 When and why should I test something?
08:00 Pyramid of testing
08:59 Guillermo Rauch Tweet
09:24 Dan Abramov Tweet
09:51 Kent C Dodds Tweet
10:00 My life example where I suffered with bad tests =D
----
#react #ReactTestingLibrary #jest #nextjs
----
Follow me on:

[ronodipbasak]

Hell!!! I've been looking to learn automated It's like Bruno knows what I want to learn right now. Thanks Bruno!! You're the best tech youtuber! Ever!

[davidhuamacctochate]

Thanks Bruno, this is a theme that i was looking for.

[DEV_XO]

Nice, saving it for later mate! Hope we can see the full serie soon or later!

[sinaebr]

wooow after more than one year :))) finally! hooraaa

[j.p.]

great content mate, definitely gained insight with this one

[gambit]

Keep'em coming, friend! Really like react, but I look forward for the next.js videos :D

[evaraymond]

Excited for this series. Great job and thank you.

[vidumini]

Woow Bruno. Great Explanation. Thank you.. Your contents are great and supportive as always.

[suktheman]

positive vibe, super informative! no reason not to push like button! thank you for the quality video!

[ricardocosta]

The best portuguese tech youtuber strikes again :). This is such a difficult and important topic for me, but beacuse ins't "cool" I find little resources, besides easy ones. I hope you can help me to improve the quality of my projects :). Best regards.

[mario]

I wish I’d met your channel a few hours ago. Good content and clean speech, keep it up.

[fardeenpanjwani]

Love this video ❤️. Really looking forward to the series!

[braydoncoyer]

Super helpful! Can’t wait for the videos related to testing Next.js - there’s a big void when it comes to testing with Next!

[monicaarnon]

This series is so incredibly helpful! Thank you so, so much for sharing your knowledge. What a fantastic teacher you are. I know I'll be returning to these videos again and again like a favorite book.

I would love to ask a question about test "location" if you will, as I shift more to a perspective of testing from my user's point of view as you recommend.

I have several components in my Next JS app, all of which are involved in the create flow of a widget and I want to write a happy path test for that flow. These components are located in ./components, do not know about each other individually, and are direct children of an index page in ./pages.

I started out with my old pattern of creating a test for (ie "create a test file for pretty much every single component") and in that test I have a describe("When a new widget is being created"). But I quickly realized, Wait a second... if I'm testing the "create a new widget" flow, I'm going to end up writing that same describe statement in ComponentB and then ComponentC, both of which are involved, but neither of which are available directly in ComponentA. And that seems kind of... wrong. And spaghetti-like. I don't think I want my future teammates to have to find "When a new widget is being created" tests all over the darn place. Right?

So if I'm on the right track here, would the recommendation be - for an integration test such as this - to instead create it at ./pages/widget/index.test.js? It seems to make more sense since all the components involved are available there. Which then leads me to think that tests at the component level could be much more granular - true unit tests if you will.

I'd be very grateful to hear your feedback about this if you have the time. 🙏🏻

[sumukhakb]

Thanks for finally making this series. 😁😁😁

[elhamkiyani]

Bruno I really really enjoy your video your explanation! thanks

[reasonforge]

For some kinds of tasks I think many unit tests make tons of sense and in those cases it usually makes sense to write the unit tests before you write the unit that satisfies them. However for web applications this is not usually the case since much of the code is about interfacing with other components including client, server, database, and even humans through the UI. Since this is a Jest course I can understand the bias toward integration rather than unit tests. But still when I go to work on a side project I have where I am doing calculations for indicators that make trading decisions in currency markets I find it very important to write many unit tests to make sure the math is right and to write the tests first which helps me design the API that delivers the calculations (as opposed to writing the API and then later figuring out its hard to use when I try to test it).

[oleksandr]

I am looking forward to learning a lot of new stuff!

[purdeychambraud]

So cool to make a new serie about tests ! Many thanks Bruno 🎉🙌🥳

[sergiob]

Hi Bruno, long time no see.
Im glad to new video series. You always share very good concepts!