Setting Up Test Environment and Utilizing Setup Files with VTest
00:00 A good place to put this would be in our test directory, right here. And inside of this test directory, we've got a couple things already. We're going to make a new directory called setup. And inside of that, we'll have a setup test env. So this is our test environment. And inside of this, we're going to take a couple of the things
00:19 that we've got that are part of our setup for our server, so the environment that we're setting up. So we've got our .env config. So this will import all of our environment variables. We've got our remix run node. So we're going to install globals. We're actually skipping over the source map support, because that's actually managed for us by VTest,
00:39 so we don't need that. And then, yeah, let's install those globals right here. So all the global variables that remix polyfills for fetch and response and all that stuff is going to be handled for us in that way. And yeah, that should take care of us for now. And then inside of this file, we can also
00:57 take all of this stuff and stick it right there. And then we can export the console error. We'll bring in the spy instance. We'll bring in the before each from VTest. We'll bring in VI from VTest. And yeah, that's solid. So then over here in our test, we
01:15 can get rid of these imports, organized imports. There you go. And then bring in console error from our setup file. And that totally works. So that's epic. And now all of the test files that we create will have all of this setup stuff run for them
01:33 before we actually execute anything. Now, I totally forgot to do this. And so why is it passing, I wonder? Oh, I know. The reason is because we're actually importing this out of testenv. So if we don't import that, then that setup file is not going to be run.
01:50 So let's just observe that really quick before we fix this. I can add a console.log. Hi. And there we go. Get our console log. But if I get rid of this, and then we'll just comment these out so it actually executes, then we're not getting that console log.
02:06 So let's fix our config with setup files. And that is going to point to the setup file that we just made. And we save that. It restarts. And with that, we should be getting that console log. But we're not. So what's going on here?
02:25 Maybe we restart the vTest. Ah, there we go. OK. So I guess you can't rely on when it restarts the config. OK. Oh, and there's one more thing that we need to do. That is very important. This is only working because we're importing the console error. But for other tests that we want to have this error handling
02:44 stuff done automatically, we want this before each. We want these install globals. We want all of this by default. For those other ones, we need to go into our vTest config to configure the setup files. So these setup files are going to point here. And if we save that, then we got everything working.
03:02 And here, let's just make sure, start it from scratch, come over here. If we console log this out and console log these, and then save that, then we're going to get our error message is going to show up because we didn't mock the implementation. And that way, so we can be sure that our setup test
03:21 is properly running and will catch us when we're throwing error or console logging errors when we weren't expecting to do so. And with that, we have now a place where we can set up our environment and do all sorts of stuff. We're going to actually be working in this a little bit more in the future as well.
03:41 So there you go. That is setup files with vTest.