This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.
Transcript from the "CSS Modules" Lesson
[00:00:00]
>> Kent C. Dodds: Let's move on to the next problem that we'll solve with this configuration stuff. I'm gonna go ahead and pull in the test for the calculator. This is the one that kind of pulls in all the other components. You might say this is sort of an integration test, cuz the calculator is pretty much the whole app.
[00:00:26] Okay, so let's go ahead and just run mpm t, find out what problem we're gonna get from this. And it's that darn dynamic import. So, quite honestly, having a dynamic import for an app like this, like totally worthless cuz it's. But in a real world application, you are gonna have dynamic imports.
[00:00:47] You should have dynamic imports for different routes and components that aren't loaded off in. Why do you need to load d3 on the login screen? Don't do that. So the problem is that right now node doesn't support ES modules or dynamic imports. The fun thing about that is that you can dynamically import code and node using a require statements at anywhere in the file.
[00:01:12] It happened synchronously but at least you can have it happen to do a function call or something like that. So, there is a double transform that's available that can convert dynamic import into the node equivalent that just as a require segment even though it's synchronous it turns it into a promise so that it can simulate the same kind of thing in node, and so that's what we're going to install to make all this work.
[00:01:39] So we'll add npm install as a dev, dependency babel-plugin-dynamic-import-node. Babel plugins are normally named really boring things,
>> Kent C. Dodds: Or descriptive things. But that's not the only descriptive module we'll be installing today. Okay, cool. So we got that installed and now we just need to update our battle configuration to pull that in.
[00:02:08] We want this to happen for our tests but not for our production code because we do want dynamic imports in the production code. And so what we're going to do for that is we'll say, if it is test, then we'll have dynamic, oops, dynamic-import-node, otherwise we'll do null.
[00:02:31] But null is not a plugin for Babel. It's going to blow up on us. So we'll filter Boolean. This is one of my favorite tricks is filter all the false-y things out of this thing. I wish I could do that for objects. It's a little more tricky. You have to do a reduced thing but yeah, let me double check.
[00:02:52] Yep, that's it. Cool, so now if we run npm t
>> Kent C. Dodds: New error. Well, it sounds like we fixed that other error but cannot read properly getItem of undefined. Well, let's find out what that's all about. Go to the calculator test, while we are not doing anything called getItem in there so maybe it's in calculator, getItem aha, localStorage.getitem.
[00:03:23] So apparently it's actually very hard to simulate local storage in node. Well at least it was a couple of years ago. Now we have proxies and so it's a lot easier. But nobody has actually done it yet. So that could be you. That would be great if you wanted to do that.
[00:03:40] It'd be kinda a fun thing to support.