Complete Introduction to React (feat. Redux and React Router) Testing with NPM Scripts
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Testing with NPM Scripts" Lesson
>> Brian Holt: Okay, so let's look at what to test looks like the if you fail. So,
>> Brian Holt: But you can also, let's do another thing, expect 1 + 1 to,
>> Brian Holt: I can't remember off the top of my head. Is it to.equal(2), or it might be one method.
>> Brian Holt: I think that that's what it is.
[00:00:28] So let's do 5 here or something like that.
>> Brian Holt: So let's run that again.
>> Brian Holt: Nope, it is .to.equal.
>> Brian Holt: Yep, okay, so this is what it looks like if you are not doing it correctly. So assertionError, I expected 2. Sorry, so this came out to be 2 and I was expecting it to equal 5 right?
[00:01:09] So that's what this looks like. So I think that's a nice feature, cuz it actually tells you what you were expecting and what you actually got.
>> Brian Holt: So yeah, again, I mess it up. It's .to.equal(5).
>> Brian Holt: Then another useful tip and trick is you can also do x.
[00:01:34] So as soon as I put that x there in front of it, it's no longer gonna run this test. So for example, if you're writing code and you break a bunch of your tests and you just don't wanna run them until you fix them, you can just throw that x on front.
[00:01:47] And now, if I come back here,
>> Brian Holt: It'll just say that my test is pending, right? And that this blue just basically means it didn't actually end up running at all.
>> Brian Holt: Same with describe, you can actually comment out entire blocks.
>> Brian Holt: So all useful tips and tricks if you gonna do some unit testing.
[00:02:11] This is like Unit Testing 101, right? [LAUGH] Okay.
>> Speaker 2: There's a couple people with some errors in the check. Could you maybe just post a checkpoint here so everyone could compare and,
>> Brian Holt: Let's make it work again first.
>> Brian Holt: Yeah, let's actually make it past 2, whatever. Okay, git status, git add -A.
>> Brian Holt: -b fem-14.
>> Speaker 3: Is there a difference between git add., and git add -A?
>> Brian Holt: There is, that's also gonna add your deletions as well if you do -A.
>> Brian Holt: -A is going to be everything that changed. Definitely dot is going to have some caveats. For example, if you're in a subdirectory, it's only gonna add everything in that subdirectory onward.
[00:03:17] It's not gonna add everything of the directory either. -A is gonna be everything inside of this git-repo, it's definitely gonna be added.
>> Brian Holt: I didn't switch branches, did I?
>> Brian Holt: I just called it 15. git commit --amend.
>> Brian Holt: Let's make that 14,
>> Brian Holt: Right? Yep, git push origin fem-14.
[00:03:56] Okay, I don't know why that mattered to me, but it did. I had to fix it. [LAUGH] Okay, so now hopefully we're on the same page. We have our test set up, let's go ahead and add that to our package.json so we don't have to remember to type the path every single time.
>> Brian Holt: So first thing we wanna do, is we're gonna fix standard later, cuz right now standard's being run through webpack. And if you try and run it through test right now it's not going to work super well. But anyway, we're gonna move that to lint. So we're gonna say lint: "standard", and then we're gonna change test actually just run our unit tests.
>> Brian Holt: Some people assert that you when you run test you wanna run both your linting and your unit tests. It's totally fine if you wanna do that, it just takes a lot longer, and usually, I want to run one or the other. So it's gonna be, what do we have up here, "mocha -- require test/helpers/setup.js".