This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Configuring Mocha" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: So I have certain opinions about unit testing and I say many of them are not popular with the general community, so I will try and keep my own personal bias to a minimum. I want to show you how to do this and then I will hopefully let you make your own decision at the end of whether or not you think these are awesome and great ideas.
[00:00:22] So we're gonna be using mocha and chai today. You can do this with jasmine, you can do this with ava. There's actually another great workshop online from the previously mentioned Kent C Dodds on testing react with ava. And you're welcome to go check that out it that's interesting to you.
[00:00:38] But, these principles were general apply to the testing framework is rather not important. The more important thing is how to test react. So, Mocha's as the test runner, for those who don't know that. Chai is the search library, the things that actually checking what is true and what is false.
[00:00:57] And then we're gonna use a specialized React testing tool from our friends at AirBnB called Enzyme. And it's just a bunch of extra testing utilities for React, to make testing React a little bit easier. Pretty great. There's also something called React Testing Utils and if you'll notice in your package.JSON, it's actually in there.
[00:01:20] Reason being is that Enzyme is actually using those we're actually going to be directly using the React Testing Utils but those are also available for you. You can check them out at the documentation. I don't actually know too much about them. Cuz I don't really use them that much but you're welcome to check it out.
[00:01:39] Okay, so we can have this like weird state where we have everything going through Babel to be able to be run. And we need that to still happen on the node side of things or else things are gonna crash because no doesn't necessary speak all the ES6 that we're using.
[00:01:55] We were in this weird state that we were gonna be in node but we needed to be running through Babel as well. So we're gonna kind of do a little hack to get that to work. So what I want you to do is in your complete, like the root of the project, create a new folder.
[00:02:13] And you have to call it test, I think. Yeah, it must actually be called test, T-E-S-T. Singular, reason being is that what Mocha is gonna look for, when you get want to go is to find the tests so, yeah T-E-S-T. I'm gonna repeat that a couple times, inevitably someone still not gonna get it but that's okay.
[00:02:32] And then, inside of Mocha we're going to create a directory called Helpers. Okay, so inside of test, singular test rght, we're gonna create a directory called helpers. This one's not important what you call it I just call it helpers. Okay, inside of helpers create a new file. And it's just gonna be nice five lines.
[00:03:03] It's gonna be require Babel dash register.
>> Speaker 2: What should we call that one?
>> Brian Holt: I called it setup.js.
>> Brian Holt: Okay, required Babel register. Require('babel-polyfill'). This is basically setting up your babel pipeline to be able to run your tests through babel as we're running them, okay. And then, we're gonna create a browser like environment for our test to run in.
[00:03:45] So that basically you can run your tests and the test can think there in the browser. We gonna use something called JS dom. JS dom is basically a very lightweight implementation of the dom that basically your test can interact with a fake dom and get the information back it needs.
[00:04:03] If you've ever used Phantom, Phantom is actually, like, going to run, it's a web kit. I think Phantom runs web kit. What this is gonna do, this is very similar. It's gonna run something like the browser but this one actually doesn't actually load the real browser forwards Phantom is a real browser.
[00:04:20] So i.e. this is way faster than Phantom. Phantom is crazy slow. Okay, so global.document= require('jsdom').jsdom. And then we're gonna give it basically its starter document. So you're just gonna say body. Then we're gonna put our little mounting place the app div in there.
>> Brian Holt: So this is going to be like the starter DOM for our particular test.
[00:05:02] I'm gonna do global.window.=document.default view. So jsDOM is gonna create a document for us and we're gonna create a window as well just so that if it goes to look for a window that it's there, right. And I'm gonna say global.navigator=window.navigator this is basically for one to go from page to page.
[00:05:36] This is allowing it to be able to do like back-and-forth and stuff like that. So one thing I would like to mention at this place is, I did not write any of that. This is all from Kent C Dodds and I directly stole it from his repo. This is just highway robbery right here.
[00:05:49] So, I get exactly zero of this credit. So thank you Kent. You're the best. Now you can give me credit again.
>> Speaker 3: There's a question of what is global?
>> Brian Holt: What is global? Most of us are used to seeing window, right. That's like the global in the browser, right.
[00:06:09] Global is like the window of node, right. It's the global variable that floats from all of the node instances. The reason why you never use it, is because using global's are really, really bad. You never wanna do that, right. Yeah, in node there is a global. So this is just setting up your global to be browser like.
[00:06:31] It's good question though. I'm very happy that you didn't know that global existed [LAUGH] and you can go back to ignoring it at this point. Any questions about this? Does it kind of make sense of what this is for? This is basically going to be run before all of your tests to create a new window browser like environment, okay.
[00:06:52]
>> Speaker 3: So there was a followup, when we say window.navigator, what is window? Is it what we define on line five?
>> Brian Holt: Yep, it's gonna be this jsdom implementation so, here we're creating the document and from document we're getting a window out of the document,
>> Brian Holt: If that makes any sense.
[00:07:19]
>> Brian Holt: Yeah, all of this is just in the name of creating a browser like environment. So that React can think as if it's in the browser and you can run it as if it was the browser.
>> Speaker 3: And then you have a closing bracket on your body.
>> Brian Holt: Have a closing bracket on my body.
[00:07:40]
>> Speaker 3: On, of the body tag.
>> Brian Holt: Thank you