DEV Community

KILLALLSKYWALKER
KILLALLSKYWALKER

Posted on

The Rise of Visual Testing: Pest in Laravel

#laravel #visualtesting

Previously we use tools like Diffy or Percy to do visual regression testing . These tools very great , but we depending on another service , extra cost and also a bit of context switching since everything had to be set up outside of our main test suite.

I have seen a lot of about Pest, but in my Laravel projects i still use PHPUnit. What really caught my attention is Pest 4 new visual regression testing feature. Since I had been relying on Diffy and Percy before, the idea of running these tests directly in my PHP test suite sounded too good to ignore.

So I gave it a try and really easy ! Another thing that stood out is how Pest writes tests. Instead of the heavy PHPUnit class and method structure, Pest feels more like RSpec (from Ruby) or Jest (from JavaScript).Since I actively use both RSpec and Jest in my day to day work, the syntax felt very natural almost like i still in those environments, but now directly in PHP.

Visual Regression Testing with Pest 4

Since this is the visual , i try to change a little bit the way i test this , instead of i change the Anakin Skywalker to Darth Vader i replace the image anakin.jpg with another image but same name .

Anakin Skywalker

The test is simple only like this -

it('displays anakin skywalker as a jedi knight', function () {
    $page = visit(['/']);

    $page->assertScreenshotMatches();
});
Enter fullscreen mode Exit fullscreen mode

When first time we run this it will save this screenshot

Before we change the image

As long it don't detect any difference in the screenshot , the test will pass . However when you change the image it will fail the test .

Fail Test

If you’re sure the change is intentional, update the snapshot with:
./vendor/bin/pest --update-snapshots

If the change is not expected, re-run the test with:
./vendor/bin/pest --diff
to review the differences.

This example when you run --diff

Diff

This is the current change that i update

Updated image

Closing

Visual regression testing before always needed other tools like Diffy or Percy. These tools are good, but Pest 4 gives us a new way. Now we can run visual tests inside our PHP test suite. No more jumping to other services, paying extra money, or losing focus. Everything stays in one place with our tests.

The best thing for me is how simple it work. Just write a test, run it, and Pest will save the snapshots. The syntax also easy as it same with rspec and jestt not heavy PHPUnit classes. For me, it feels lighter and more fun.

Because of this, I think Pest 4 is really worth trying, especially if you still use PHPUnit. And if you already use Pest, then this new visual regression testing can be the extra feature you did not know you needed.

Top comments (0)