Co-locating Component Tests0:00
All right, so we saw how powerful Pest is with livewire four. Um, but I wanna show you a way that I structure my test files that's a little bit unorthodox and works in Livewire. So let's, let's take a look. So right now we've created this create post test file, but it lives in the test directory. And if you look, it's like, well, we have a post folder and then the create file.
And if you look, it's like, well, we have a post folder and then the create file. And so if I start adding edit, update, delete, then am I gonna have create or like edit post test and then, you know, oh, I should put those in a post folder. So I put 'em in a post folder. And then what I end up doing is my entire app is split into two mirrored like folder structures, like one in the views and then one in the tests. And it's like, well that's always a smell to me
and then one in the tests. And it's like, well that's always a smell to me where I like co-locating. That's why view based components are so nice because if you think about a single component in your project, I want to know exactly where to look to find it and I wanna find everything related to it right there. So what if we put the test right next to the actual component file, which seems a little weird,
So what if we put the test right next to the actual component file, which seems a little weird, but this is actually really common in a lot of other frameworks, is putting tests right next to files that they are testing. And I think in this case, when it comes to your ui, it's really, really helpful. So check this out. Let's add a new test right next to this test. So we can do that manually.
right next to this test. So we can do that manually. You could create the test or it'll say Artisan make Livewire, uh, pages post Create, and I'm gonna give it the test flag and then it'll know, oh, this already exists. So we'll leave that alone. But we'll also add a create test PHP. And this is a, you know, normal test file. Let's, um, let's actually replace this
Why Tests Fail Outside1:40
And this is a, you know, normal test file. Let's, um, let's actually replace this with the full create post test file. So I'm just gonna copy and paste this whole thing in here, okay? And this is great and you'd think we're done, but we're not. And that's why we're recording this video. If I try to run this, it is going to throw an error Target Class config does not exist. So you're gonna get, you're gonna get a bunch of different,
to throw an error Target Class config does not exist. So you're gonna get, you're gonna get a bunch of different, I don't know what your error will be, but it will be some error. And this is why if I open this up and I just run Pest, it's not actually recognizing this test file because Pest is trained like PHP unit to look in this test directory and find tests inside there. So there's two things you have to do
Updating Pest Test Paths2:20
to look in this test directory and find tests inside there. So there's two things you have to do to unlock this in your project. And I documented both of them in the Docs, the first one inside our pest config. So if we go to pest PHP where we had browser headed, let's get rid of that. We have that path extend or Past Extend, and then we have in feature, we need to add one more bit here.
Configuring PHPUnit Suite2:41
and then we have in feature, we need to add one more bit here. We're looking in the feature directory, but we're also looking in resources, views. So this says, Hey, pest. Now look in those other places as well. And there's one other place we have to do this, unfortunately, inside PHP unit we have to do a similar thing. So here we're gonna say, well,
have to do a similar thing. So here we're gonna say, well, let's just copy it from the docs. You can configure this however you want, but I chose to make a new test suite. Whoops, a new test suite called Components. And that stuff is for just our component tests. You could put this right inside unit if you want this all to be inside unit, you really decide what you want to do. But I kind of like this, like having a
to be inside unit, you really decide what you want to do. But I kind of like this, like having a new test suite called Components. That's all of just the component tests. And it says, Hey, any file with this suffix in this folder, I want you to treat as a test in this test suite. So now if I run past, it should recognize it and you'll see that it does resources, views, pages, post create. So it does, and we can also say like,
pages, post create. So it does, and we can also say like, test suite equals components, and now we're running the test suite just for the components. And if we go back inside here and you use your editor to run the test, it works great. So, uh, this is a nice feature that I like is co-locating tests right next to their source files.
Converting to Multi-file Component3:53
that I like is co-locating tests right next to their source files. But it does feel a little bit weird. I don't know, it's fine. But I guess what I'm saying is what I like even better is when your single file components are multi file components and the test is right in there, it feels even better. So watch this. So PHP Artisan, uh, live Wire Convert and we're gonna convert pages post create into a multi file component.
and we're gonna convert pages post create into a multi file component. And now Live Wire took care of it for us. It kept the test file in there. So now we have the create blade view, the PHP file, and the test. Like how nice does that feel? You got your JavaScript file, your view file, your PHP file, and now your test file. All right in there running actual browser tests super fast.
and now your test file. All right in there running actual browser tests super fast. Ah, I can't get enough of it. Alright, that's enough of testing. Let's move on. I'll see you in the next video.
