Testing React Applications, v2 Course Overview
This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.
Transcript from the "Course Overview" Lesson
>> Kent C. Dodds: So this is all about testing React and web applications. These are a bunch of links about, just information about me, stuff that I do and I'm involved with. So, yeah, feel free to click around and check this stuff out, my sites are available here. They're not very interesting beyond this, but it's tra-slides.
[00:00:20] On kcd.im and, yeah like I said there's not a whole lot this slides most of my workshop are very matching the code and in the repo. So let's set up an expectations for the workshop, this workshop is about the fundamentals of testing specifically with React. I will talk briefly about the fundamentals of testing in general.
[00:00:44] But if you want to go deeper on that, my other course kinda goes into that more. I'm going to show you how to configure Jest. So I thought a lot about how can I make the configuration of these tools interactive and hands on. And the only answer I kept coming back with is, this will be so boring to have exercises for configuring of tools.
[00:01:09] So you'll just watch me, interact with me, and ask questions, but yeah I'll show you how to configure Jest for a client side React project. Luckily, if you're using like create React app, it's all configured for you and it's like magic. But most applications are not using create React app so it's good to know how to configure Jest.
[00:01:55] How many people have heard of snapshot testing, okay? Anybody use it? Okay, so I'll go over what it really actually is and where it works well and I'll also talk where it does not work well. So how you can use that to effectively give you confidence in your application and then we'll do integration tests with React.
[00:02:21] So, integration tests for traditionally it's two services talking to each other, that's an integration test. I think the languages kind of changing there, and now we're talking about integrating with other, you could almost consider your components as a service. And so in this situation, we'll be talking about integrating components with each other..
[00:02:43] And so we'll talk a little bit about that, and you'll have some exercises for that. And then we'll get into the end to end stuff using a different tool called Cypress, which is totally mind-blowingly awesome. How many people have used Cypress before? All right, cool, so Joel knows what's up.
[00:03:01] He can tell you Cypress is fantastic, and so I'll do a similar thing that I did with Jest. Cypress actually takes a little less to configure itself, but there's a little bit more that you have to consider with Cypress in general. But yeah, then we'll have some exercises for writing intent tests.
[00:03:21] So that's pretty much the whole course. Anybody have questions about that? Okay, so here's what this workshop is not about. It's pretty technology specific, I'm not gonna show you Mocha, I'm not gonna show you Jasmine. I'm gonna show you the best testing framework from my experience that I've had for testing React.
[00:03:43] Another thing that I didn't mention, but I'll just give you the spoiler, we're not gonna be using Enzyme. That's like the defacto standard for testing React's components. I have a lot of problems with Enzyme, and I'll talk about those problems that I have with Enzyme later. I used Enzyme for like a year and a half in preparing this workshop and preparing to teach you all Enzyme, I realize that it and there were some problems.
[00:04:10] I just didn't feel comfortable teaching you about the tools. So we'll be using something else that we'll talk about later. So, yes it is clearly quite opinionated and yeah, we're not gonna cover all the forms of testing. There are a lot of them so we'll just cover the three unit, integration, and intent.
[00:04:32] If you haven't set things up, definitely get that started. If you have set things up already, and you did that yesterday or something, go ahead and do a git pull to get the latest changes because you will want those. And actually you could also run npm run setup as well as to updates some dependencies.
[00:04:53] There is a bug fix in one of our dependencies, so if you can get that updated that would be cool. But not totally critical if you don't. Cool so, logistics for this, sorry, some more boring stuff. If you have questions please raise your hand, you all who are here in person have a very important job and that is to ask the questions that people would be asking when they're watching the course later.
[00:05:24] So please, if any question comes into your mind, if you don't wanna ask it for yourself ask it for the person who will wanting to know later, because they can't. So please, please ask questions. We have a chat during the workshop, so feel free to debug and work through things together in there and I'll try to be more conscious of that today so that I can pick up the questions that pop up there.
[00:05:54] For several of the exercises we have a spot where you can elaborate on what you've learned. And if you're watching this as a course there's the note feature in Frontendmasters, really important part of learning and retaining what you've learned is to elaborate on what you've learned. Try to say it in you own words, and so at the bottom of some of the tests that you'll be writing is an extra test that has a link to, a feedback form where you can type out that elaboration.
[00:06:24] And so, I highly recommend that you do that. It's an important part of your learning. And if you have questions that aren't relevant to what we're talking about here, that's totally cool to ask me those, but let's keep the workshop on topic. You can ask those questions on my AMA, you'll find it on GitHub.
[00:06:43] It's ask me anything and then I tweet about stuff sometimes, a lot actually. I tweet all the time, I tweet too much. Okay, so this is more of what we're gonna do. So I'll demo something, introduce an exercise, a concept and then hand that off to you. During the exercise if you can, or if you'd be interested in pair programming in the exercise, you have two people but one computer, that can actually enhance your experience as well.
[00:07:16] So you balance ideas off of each other, clarify each other's assumptions and correct assumptions in some cases. So that's a pretty good learning mechanism as well, if you're interested in pair programming, and then fill out the feedback form. Some of these have a bonus, or you could make up your own bonus, mess around with stuff.
[00:07:37] So if you finish earlier, you can do that. Help each other out that will also help solidify your understanding. I have a secret about learning and that is to solidify your learning, you have to teach and so you all are participating in my learning experience, this is just me trying to learn.
[00:07:56] And it works out really well, so if you have an opportunity to help somebody else teach somebody through this workshop that'd be a good thing to do. And then feel free to make full requests, this is open source, many people make full requests for my workshops. And so definitely if you notice something kinda weird then feel free to make a pull request if you have extra time.