Intermediate React, v2 Intermediate React, v2

Jest & React Testing Library

Check out a free preview of the full Intermediate React, v2 course:
The "Jest & React Testing Library" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces naming conventions on the test folder for jest, and installs the react testing library and jest packages into the application.

Get Unlimited Access Now

Transcript from the "Jest & React Testing Library" Lesson

[00:00:00]
>> Brian: So now we're gonna do just a modicum of testing. Before we get started in testing, I'm probably not the person you wanna learn testing from because I don't really like testing my code that much. Specifically, I don't like testing UI code a lot. When I worked at Netflix, I worked on the homepage, and there's so much flux in that homepage where it's constantly changing day over day, that writing test for it was pointless, right?

[00:00:24] Because we'd spend as much time or more time writing test and then just deleting them the next day when we changed the front page again. So, that's why I don't write a lot of tests for specifically React code, because it changes all the time, and to me that doesn't make a lot of sense to do that.

[00:00:42] But what I will say for things like we have our API client, I'll test the hell out of that, right. I'll abstract business logic into modules, and I'll test the modules and then they won't test the UI code. So you still need to write front end tests, but just not as much for UI components.

[00:01:02] That being said, like if you have consistent problems, right? So for example, Facebook constantly sites have they have problems with showing notifications at the wrong time, right. So they've wrote a lot of tests, testing that specific things like making sure that they show notifications at the right time.

[00:01:21] So that might be appropriate. And I'm gonna show you how to do it and then you can make your own decisions about it. Again there is a kentc.course on fronted masters that is advanced React testing where he goes into great depth on how to do it. And I'm actually gonna show you a little bit using his library.

[00:01:36] I think he uses something other than Jest, and I'm gonna use Jest today so that might be useful to you. Previous versions of this course I believe used Mocha as well so that's interesting to you as well. I think that's v3 or v2 that uses Mocha.
>> Brian: Okay, so what we're gonna do right now is we're gonna say npm install- capital D jest as well as react-test-library

[00:02:20]
>> Brian: Okay, inside of your source director we are going to create a new folder called __tests__. Why double underscores on both sides, or dunders? I did not make that up, that's what they're called. [LAUGH] It's a Python thing. I think it arose from Python, it might have been existing from Python.

[00:02:41] It's not a JavaScript thing, it's definitely more from Python. But it means magical, right? So if you have underscores on both sides, it basically means something is looking for this, so it must be called this, right? So in this particular case, jest will automatically find test directories named like this and run tests inside of them, right?

[00:03:01] So if I create a new file here, I'm still gonna call mine SearchParams
>> Brian: .test.js, but I actually could just call it SearchParameters.js, and it would still be found because it's in the magical test directory, right?
>> Brian: Otherwise it will look for files called .test.js, or .spec.js. So,