Testing React Applications, v2 Testing Trophy
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 "Testing Trophy" Lesson
>> Kent C. Dodds: Okay. So with that I wanna talk about this really quick before we head out. The question was asked earlier, how do you know when to write a test as an end-to-end integration or unit test? How do you know whether it should be written with Ciprus or? And how many people are familiar with the testing pyramid?
[00:00:21] Okay. So as testing pyramid, it's a pyramid and at the top you have end to end. The middle you have integration and the bottom you have unit. And so by nature of the shape, unit testing is bigger and the suggestion is that your unit has more. Well, I think that the testing pyramids actually missing a very important piece of testing that's static code analysis.
[00:00:40] So ESLint and Flowtype or TypeScript. But in addition, I think that it has the wrong shape. So the justification for the testing pyramid and the shape that it has is that the lower down on the pyramid you are, the cheaper it is to write and run those kinds of tests.
[00:01:00] And, in addition, the faster those kinds of tests run. And so, you spend more of your time there, because of that fact. But I ask myself, okay, well, that's the case, then why I don't just do everything as unit test and never use anything else? There is a very good reason for that and that's the confidence coefficient.
[00:01:21] Something i made up, but as you go up the testing triangle or testing trophy in this case, the types of problems that you can catch and solve amount of confidence that those type of testing can give you are much bigger. So static typing, I can catch, you didn't define the variable three or the variable three is a string, it should be an number.
[00:01:43] Those are pretty simple problems. They could cause catastrophic issues. But they're generally pretty simple, not too hard to catch. Even without those kinds of tests anyway. And then, like an end to end test could catch that, pretty easily as well. So as you move up the pyramid or the trophy in this case, the types of problems you can catch are much bigger.
[00:02:12] A user who's logged in right, like with this certain scenario, can't check out. That's a pretty serious problem, we're losing money. And so the confidence coefficient is the reason why the triangle exists at all.
>> Kent C. Dodds: But in my mind, the confidence that you get out of integration tests are way bigger, are way more valuable, than the testing pyramid cares to admit.
[00:02:41] And so, I feel that you should spend most of your time working with integration tests. Especially with the tools that we have now, those things are running much faster, and they're not as expensive from a resources and hardware aspects. And so the types of tests that I've shown you today of integration tests with the UI.
[00:03:03] As well as similar types of tests for your backend services. That's kind of what I'm talking about when I say integration tests. And those are where you're gonna get the best bang for your buck. That said, you should have all forms of testing. And Cypress is just so good that I'm starting to expand.
[00:03:21] My end to end tests, my vision for what an end to end test or how many tests I put into Cypress, because the tool is just so good. But it's hard to beat Jest because Jest is like fantastic. So we've got some pretty cool tools. With that, I have one more slide, but I'm going, before I get there I just wanna ask if there are any final questions before we wrap up the day?
[00:03:51] There is a question in the chat, so what about using data attributes to select elements? Billy, so we do have the data test ID and that's what I would suggest. If you want to select anything that [COUGH] for some reason doesn't work just select, by a label text or by the text.
[00:04:09] Then add a data test ID and then you can get back test ID. Any other questions before I pop. Yeah.
>> Speaker 2: Repeat my question from before like, you could do EDU tests in Jest, or Cypress.
>> Kent C. Dodds: right. Yeah. Thank you for asking again. So to clarify, what we did earlier was actually not an end to end test.
[00:04:32] And the reason is because we mocked out server requests. So our end to end tests with Cypress are actually hitting a server. We have to have that loaded and we have fake data when we're loading it up. And so that is more in the nature of an end to end test.
[00:04:49] And so that's kind of where I draw the line. If I don't need the server far this particular test, then I'm going to make going to make that an integration test with Jest. If I want to really test what the whole experience is like with a live server then it's going to be with Cypress.
>> Speaker 2: So the log in and register tests with Jest, you classified them as integration.
>> Kent C. Dodds: Yep, I'd classify those as integration, yep.
>> Kent C. Dodds: All right, thanks everybody. Appreciate it.
>> Class: [APPLAUSE]