Webpack 2 Deep Dive Exercise: Using Karma with Webpack

Transcript from the "Exercise: Using Karma with Webpack" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kent C Dodds: Now we're going to do something that's useful here and we'll work on this together. So, let me just actually pull out my notes here really quick. Sorry.
>> Kent C Dodds: Okay so here's the problem that we're trying to solve. We, well let me get to our branch 02.1,-add-assertions there and that'll be checkout -f.

[00:00:42] So this is the branch that you're gonna wanna be on. So now we have that karma config that we just saw in the root of our project, and we want to start actually testing our modules. So if we go into our controller test, we have these worthless tests that are just testing that they work.

[00:01:02] And actually, if you run npm t, then that will run current start up, pop up the browser and those tests pass which is great. JavaScript works. But we don't care about JavaScripts working. We care about our job script working. So what we're gonna do is we're gonna say const Controller = require controller.

[00:01:25] So we're gonna pull that controller module and we're gonna do some assertions off of that. Just from the get go, and by the way I'm gonna give you some time to work on this yourself in a little bit. So if you wanna follow along that's fine, but if you wanna just soak it in then that's cool too, however you learn best.

[00:01:45] So we're not actually, and in this project writing the test is a totally different course. So we're not gonna write very many tests, we're gonna write one test just to make sure that it works, and we're gonna say expect(Controller).to.exist. And fun exercise during lunch somebody can explain how this actually is an assertion, JavaScript is so weird.

[00:02:09] [LAUGH] I love it though. So if I go ahead and run npm t, which is short for npm test or npm run test. Thank you npm for making it possible for us to be lazy. We're gonna get a reference error, requires not defined. So can anybody explain why maybe we'd get an error like that?

[00:02:33]
>> Kent C Dodds: So I'll explain really quick what's happening here. We've configured karma to load all files matching this glob. The only file matching this glob is controller.test, so this file. And it's not doing, there's no webpack integration here at all. And so we have this require function that we're calling to get the controller.

[00:02:58] So why is the require, or why are we getting that reference error, what do you think?
>> Speaker 2: There's nothing else in the file.
>> Kent C Dodds: Yeah, yeah. So it would basically be like popping up a browser, copying that code and running that, that's exactly what it's doing. And so what we need to do is integrate webpack with that, so it will first resolve these dependencies and then load it into the browser.

[00:03:23] And in karma land that's called a preprocessor, and so we need a webpack preprocessor to preprocess our files before karma sticks them into the browser. So I'll go ahead and close this guy and we'll go to our package JSON. You don't actually have to install anything, but what what you would install if you didn't already have it installed is karma-webpack.

[00:03:53] And that would be whatever the latest version of that is which is 1.7.0. And with that installed you can use that plugin in your karma config which we're going to do now. So the first thing that karma needs is it needs you to tell it okay, so what are the things that we need or what are the files that I want to preprocess and it just so happens that we wanna preprocess all of our test files.

[00:04:25] So what I'm gonna do is actually I'm gonna write a little bit of pseudo code and then let you take it from there. So what I need is a preprocessors object right here. Where the key is glob, so this is a glob, hint it's this one. So the key will be a glob that matches the files that we want to run through the preprocessor, and the value will be an array of the preprocessors that we wanna have it run through.

[00:05:00] The preprocessor's name is webpack, so it'll be a string of all the preprocessors that we want it to run through. And then the next thing that we're gonna need is a property called webpack. And that the value will be the webpackconfig that we want. So essentially this thing, this object.

[00:05:25] We somehow need to get this object into our karma config and assign it to the webpack object, okay. I'll give you a hint if you need one. Yeah, and then I think, yeah that's pretty much it. So go ahead and get started on that, with that you should actually be able to run the tests, and it should pass.

[00:05:53] Yeah, so go ahead and ask any questions that you have you need a little bit more of a hint than what I've given you, it's okay if you need more of a hint. I was a little ambiguous with this bit.
>> Kent C Dodds: I'll start giving the hint, and if you don't want the hint then you can tune me out.

[00:06:11] But remember that this is just a JavaScript file. And it's using common JS for module exports, and so you can actually require webpack, webpack.config.babel right here. And what that's gonna give you is a function, this arrow function, that accepts a single argument called env, that's an object. And so you can say okay require, I'm just writing pseudo code here it almost looks like CoffeeScript until I start adding parentheses.

[00:06:44] But you're gonna provide it just an object, if you want to you can say env is test and that's going to give you back this object that it's returning. And so this, it's gonna give you back the config, and the value that you get back from that is what you're gonna assign to the webpack property.