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 instructor and Google Developer Expert.

Kent C Dodds


Kent walks through the solution to the Using Karma with Webpack exercise. The code for this solution is on the FEM/02.2-add-webpack branch.

Get Unlimited Access Now

Student: I'm a little confused, then, what we're passing into the webpack config.env part.
Kent C Dodds: Yeah, okay.
Student: You actually said that, I mean.
Kent C Dodds: Yeah, yeah.
Student: It's a property, right?
Kent C Dodds: It will be an object. Because if you look at the.
Student: It's not something that's set in the package.JSON script, though.

Kent C Dodds: No, it's not.
Student: Okay.
Kent C Dodds: Yep, in this scenario, we're just calling our webpack config module the same way that webpack is calling it.
Kent C Dodds: So if anybody needs to cheat a little bit, that's that. And again, if you have the slides up, you can go look at the get diff to kind of give you an answer or to just look at it really for a quick second, just for what you're looking for.

Kent C Dodds: Let me give you a quick tip on the preprocessors thing, too. So you could create a variable up here called preprocessors, and that's an object, and then you'd say okay, preprocessors is preprocessors. Well, yeah, and then because the key needs to be a glob, it looks like you would need to look like this, you could just put it right here like this.

Well, it is kind of like going a little bit too far, but if you want to make it a variable, you could say fileGlob, and then you can use that in both of these places here.
Kent C Dodds: There, and then that'll be preprocessors, whatever you put in there. And then with ES6, if you're running Node 6, then you can just say fileGlob here.

Kent C Dodds: And also with the ES6, you don't need to do that either, it's pretty fun.
Kent C Dodds: Yeah?
Henry: There's a question, Karma should require only common js module to get through the require method. Why does it need the webpackConfig?
Kent C Dodds: So I'm not 100% clear on the question, so Henry, are you asking about whether like the browser needs to require the common js modules?

Because what we're doing here is we're enabling the browser to require our modules. And our modules do need to run through webpack, because webpack will take care of transpiling with babel. Webpack will take care of resolving CSS modules and all those kinds of things. So that's that's why we need to provide Karma with the webpackConfig so that the webpack Karma plugin can resolve those those modules with those loaders that we specified in those kinds of things.

Does that answer your question, Henry, hopefully? Okay. Does anybody have it loading? Yeah? Sweet, the champion of the day.
Kent C Dodds: Anybody still just kind of hoping that I'll give you the answer here in a second? Okay, I think I'll run through the answer now, and then we can break for lunch.

Yeah, sure. So Scott asks, does the value of the preprocessors glob is a string, does it refer directly to the Karma config key of the same name? Or is webpack as a preprocessor a thing that knows to look for the webpack key, good question. So yeah, the value of this is going to be webpack.

If you didn't catch that yet, that corresponds to the plugin that we're using. So if you go back to your package JSON, you'll have karma-webpack right there, so Karma is going to say, okay, you've specified a preprocessor called webpack. I'm going to look up the karma-webpack plugin. And then say hey, karma-webpack,, do something.

That's all that karma does. And then that plugin does something. And what it does is it looks in the configuration for the webpack property, just like Scott suggested. So yeah, I think we got that we can say webpack is webpackConfig, and with that, we should be able to run our tests.

Kent C Dodds: Okay, sweet, so we'll go ahead and run it.
Kent C Dodds: And it passed, yay.
Kent C Dodds: So in the actual solution in the repo, what I do instead is I inline this, so this is like this.
Kent C Dodds: But yeah, same idea.
Kent C Dodds: Actually, I think I create a variable out of this too, but

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