Testing React Applications, v2 Handling Dynamic Imports

Transcript from the "Handling Dynamic Imports" Lesson

[00:00:00]
>> Kent C. Dodds: But because that's not supported right now, we're going to have to support it ourselves. In real applications, you're gonna be using local storage probably, and so you'll want to have support for this. You'll also wanna have support for session storage if you use that, because that's a very similar API.

[00:00:15] So to make this work, I'm going to copy a file from our solution here, I'll duplicate that, pull it over into our calculator. And this is our local storage mock, so it doesn't simulate things perfectly. Local storage has some pretty interesting things about it. But as long as you're only using the methods on it and not worrying about like the dot syntax, you can actually do localStorage.foo.far.baz.

[00:00:52] And I don't know why you'd do that. That's kinda confusing to me. So as long as you're just using get item, set item, and remove item, then this actually is a perfectly fine type of mock. So we need to run this before our test run so that if we don't have local storage supported, then we can add it.

[00:01:14] There's actually a couple of ways to do this, quite honestly. It's kind of annoying, but the way that we're going to do this is with the setupTestFrameworkScriptFile, it's a very long name. And we'll have that point to our module that we're using to set up our test framework.

[00:01:36] So require.resolve, and it's test/setup whatever the name of this thing is. Here we go, something like this, here we go. And who needs the JS when you're require resolving something? Okay, so, setupTestFrameworkScriptfile points to a file [INAUDIBLE] setups your test framework. And now, if we run our test again, our tests are passing, woo!

[00:02:12] That's great. Any questions about that?
>> Kent C. Dodds: So this would be another place or some other use cases for this that we're doing at PayPal is we have this module that's responsible for taking all of our localization files and turning that into a JavaScript object that we then, based off the user's locale, will choose the user's locale to put that in the indexed HTML, when it's rendered on the server.

[00:02:46] Send that up to the client and the client pulls that in for its internationalization stuff. And I really like having the English or the default text in my test. And so I use this file to basically do that process before I start up my test, so that my test has the stuff all set up.

[00:03:07] There are various other things. If you have global initialization, your documents, that simulated document body needs to have a certain shape or something for some of your third party mantra your using or something, then you can use this setupTestFrameworkScriptFile. There's also a set up files array. And you can check out the docs to see what the difference is.

[00:03:31] If you figure out what the difference is, then please tell me because I don't quite get it. One is the testing framework hasn't been installed yet, and the other one, it has been installed, but I never really, yeah. But they both seem to work pretty well, so