The full video and many others like it are all available as part of our Frontend Masters subscription.

Kent C Dodds

Kent C. Dodds works at PayPal as a full stack JavaScript engineer. He host JavaScript Air and co-hosts React30 podcasts. Kent is an Egghead.io instructor and Google Developer Expert.

Kent C Dodds

PayPal

In order for Karma to run correctly, it needs to use the karma-webpack preprocessor. After a brief explanation of why the preprocess or is needed, Kent introduces the next exercise which involves using this preprocessor. This exercise starts from the FEM/02.1-add-assertions branch.
- http://slides.com/kentcdodds/webpack-deep-dive#/13/3

Get Unlimited Access Now

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.

So this is the branch that you're going to want to 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.

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 going to do is we're going to say const Controller = require controller.

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

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

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 going to get a reference error, requires not defined. So can anybody explain why maybe we'd get an error like that?

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.

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.

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.

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 want to preprocess all of our test files.

So what I'm going to do is actually I'm going to 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 want to have it run through.

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 going to need is a property called webpack. And that the value will be the webpackconfig that we want. So essentially this thing, this object.

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.

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.

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 going to 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.

But you're going to 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 going to give you back the config, and the value that you get back from that is what you're going to assign to the webpack property.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now