Testing React Applications, v2 Configuring Jest & Babel

[00:00:00]
>> Kent C. Dodds: Then we're gonna get into configuring Jest. So you can let your fingers rest for a little bit, because this part is pretty much just, watch the show and interrupt me as you have questions. So, I'm gonna go ahead and reset --hard, just so I'm in a clean state.

[00:00:19] Don't have any surprises, hopefully. And you can try to follow along if you want, if that's something you're into, but I'm probably gonna go too fast for you to follow along. So we are gonna be in this other directory, configuration > calculator. There's a calculator and calculator solution.

[00:00:41] So later you can check out the solution if you wanna reference what's going on. Or obviously you can watch the video later, the recording later as well. So we've got a pretty simple application here. The reason that we're not setting up our actual full application is because it's It's a fair bit more complex mostly just for workshop purposes.

[00:01:03] So it's not really totally realistic as far as the configuration is concerned. So we're gonna CD into the other directory configuration calculator and inside of here let's go ahead and start our server. So we're using webpack dev server for development and we've got a build and we've got this local server.

[00:01:28] It's configured with Babel and all this stuff that you'd find in normal React application. So we'll run NPM, run dev and that will start us up on localhost 8080 oops, localhost:8080. And here's a fun little calculator that was created by Michael Jackson React Training friendly person. This is a link to the original code pen that he used to create this thing.

[00:01:59] So I modified it slightly but it's pretty cool. You can actually type in 4 x 3 is 12, and it does math properly, which is always good. Computers are pretty good at that. It even has this automatic shrinking function, which is kinda handy. So, yeah, it's a pretty simple application, but it serves really good purpose for us and that's what we're going to be configuring for our tests.

[00:02:30] So, let's see. Okay, so let's go ahead and get this configured to start testing. So we're gonna MPM Install has a dev dependency Jest. And this is one of my favorite things about Jest, is it's taking so long to install because it has tons of stuff. Because I don't have to install a million things individually just to get my test working.

[00:03:03] So it comes with a whole bunch of stuff. And the features that just comes with out of the box are just unreal. So I'm gonna go ahead and add a test script. Woops, let's make sure that my keys are in the right spot. Are my fingers on the right keys?

[00:03:25] And that is my test script, which is called Jest. And just to- I think I messed it up, but in the depth dependencies, it should have Jest in here somewhere. It is alphabetical, so it will be Jest and it was that, okay. So that's the current state of things.

[00:03:47] We install it. We add the script for Jest. And then if I run the test MPMT for short then it's gonna say hey I didn't find any tests. So we're going to be writing tests later, for now, I'm just gonna copy over Some tests. So we'll copy this over, duplicate this, put it in the calculator and we'll take a look at that test.

[00:04:13] Okay, so this utilgetformattedvalue, this is just JavaScript stuff. It doesn't need It doesn't even need the dom. It doesn't, it's not reacting. And so with this now in place we're following the built in convention. So if you look at this error message here, it has a built in test match.

[00:04:34] And so it'll match any file that matches this glob. So anything that's inside of a test directory at any depth. With the .js and optionally x. I was found the jsx extension to be totally weird. If that's what you do, I don't know why you do that. But feel free to continue doing that if you want to.

[00:04:56] But you'd also matches any file that has .spec.test.js X. And then it ignores anything in node modules. So that's the default configuration for those. I like putting things in the double underscore test directory because I used to colocate it and have a utils.test and then my directories just got enormous.

[00:05:22] It was hard to tell what was a test and what wasn't, so I put everything in a test directory close by, right next to the file it's testing. And that made it a lot easier to manage there. So, with that, we just copied a test over, now we can run npm t to run our test again

[00:05:43]
>> Kent C. Dodds: And we're getting our first error, so huray, it found our test. We've got a problem, and it's saying unexpected token import. So this is something that you're gonna come across in normal, real world Applications that are using Webpack and Babel. Because your Babel configuration should be set to transpile everything except for imports.

[00:06:09] Who knows why? Why should you not transpile imports when you're using Webpack, yeah?
>> Speaker 2: Cuz there's more than onentax supported by Webpack
>> Kent C. Dodds: Yes, because Webpack supports ES modules. And the reason that webpack supports ES modules is so it can do tree shaking. It enables it to skip out entirely on some imports, which will remove that dead code and our bundles are much smaller.

[00:06:38] And so if you look in here, if your babelrc does not look something like this in your Webpack project, then you are missing out on tree shaking, you should change it. You need to specify for Babel preset env modules is false. But this is why our tests are failing because Jest actually picks up this babelrc automatically and applies it to all of our tests.

[00:07:01] The problem is we´re saying, hey don´t transpile the modules and so after Babel is done with it, Jest looks at it and says, wait what is this import thing? So because of that we need to differentiate between whether this is happening in our tests or not. And so I´m gonna scroll down just to copy this because I don't want it ticked off.

[00:07:25] But by default, Jest will set the node environment to be test, when it's being run and so you can determine that inside of here. One thing I failed to mention is this handy little trick with the Babel RC. Your Babel RC is probably just a JSON file, so I made it a JavaScript file.

[00:07:45] Because, in the package JSON here, I have Babel configured in the package JSON. That specifies a preset that points to the JavaScript file. And now it's like magic, I can have that. In Babel 7, this actually will be valid configuration. You won't need the package.json stuff anymore, so that would be cool.

[00:08:06] Yeah, but for right now, if you want to write your babelrc as a JavaScript module you can do this dynamic stuff, then use presets. Babble also has the support for this ENV thing, which is very confusing and so I never use it. So this is what I do instead.

[00:08:25] Okay, so if we are in test, yeah, so we'll say modules. So if we're in tests, then we want to be CJS, otherwise, we want it to be false. Let me make sure that's right, or CommonJS, yeah. CommonJS is the default module system. So, that will preset your V during the test, will actually transpile our ES modules to commonJS,.

[00:08:54] And then JS will be able to understand that. And I have a mistake. Sometimes I don't know how to program but I figure it out eventually. Okay, so with that change let's run the test again, and it works. Yay, we got our first test running. That's pretty nifty and you know it's kinda cool cuz we didn't actually have to configure Jest at all.

[00:09:20] We had to do some stuff with Babel but this is literally our test script and our configuration just with Jest. Yeah I just think that's the coolest thing.