Webpack 2 Deep Dive Using Karma with Webpack Solution

Transcript from the "Using Karma with Webpack Solution" Lesson

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

[00:00:04]
>> 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 [CROSSTALK].
>> Student: It's not something that's set in the package.JSON script, though.

[00:00:30]
>> 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.

[00:01:16]
>> 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. [COUGH] 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.

[00:01:45] 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.

[00:02:20]
>> 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?

[00:02:52] 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.

[00:03:24] 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? [LAUGH] Okay, I think I'll run through the answer now, and then we can break for lunch.

[00:03:57] 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.

[00:04:20] 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 gonna say, okay, you've specified a preprocessor called webpack. I'm gonna look up the karma-webpack plugin. And then say hey, karma-webpack,, do something.

[00:04:39] 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.

[00:05:13]
>> Kent C Dodds: Okay, sweet, so we'll go ahead and run it.
>> Kent C Dodds: And it passed, yay. [LAUGH]
>> 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