News

Use Laravel Dusk to Test JS-Based Applications

Published
Use Laravel Dusk to Test JS-Based Applications image

Laravel Husk is a thin, light scaffolded Laravel Dusk environment. It allows you to test JavaScript applications with PHP using Pest without scaffolding an entire Laravel application.

Once you've followed the installation instructions, you can write Dusk feature tests like any other application using Dusk. You'll have a browser folder, and inside of that folder, you can run your Dusk test suite with the following command:

# Start your JS application
npm run dev
 
# Run the Dusk test suite
php application pest:dusk

Here's an example of a test from a demo Nuxt application using Husk for end-to-end feature tests:

use Laravel\Dusk\Browser;
use Tests\Pages\HomePage;
 
it('loads', function () {
$this->browse(function (Browser $browser) {
$browser->visit(new HomePage)->assertSee('Welcome to your Nuxt Application');
});
});

Learn More

There's not much more to learn beyond the Dusk and Pest documentation. Husk takes the pain out of setting up a Dusk environment outside of Laravel applications and provides an easy path to test JS applications with familiar tools.

The author has some example projects written in Nuxt, Gatsby, and Gridsome. These examples are helpful to visualize all the moving pieces involved in testing JS apps with Dusk. It looks like NextJS and Svelte are planned, but the links were broken when I looked through the Husk readme.

To get started in your own project, check out Laravel Husk on GitHub. The README also includes a GitHub actions template you can use to start running Dusk tests in your JS projects.

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
Lerd: A Free, Open Source Herd Alternative for Linux and macOS image

Lerd: A Free, Open Source Herd Alternative for Linux and macOS

Read article
Let's Encrypt HTTPS on an IP Address With FrankenPHP image

Let's Encrypt HTTPS on an IP Address With FrankenPHP

Read article
Laravel Chores: Resumable Data Operations and Cleanups image

Laravel Chores: Resumable Data Operations and Cleanups

Read article
NativePHP v4: Build Native iOS and Android UI in Blade image

NativePHP v4: Build Native iOS and Android UI in Blade

Read article
Laravel Lock: Distributed Locks for Models and Routes image

Laravel Lock: Distributed Locks for Models and Routes

Read article
Laravel Image Responses: Serve Resized Images From Routes image

Laravel Image Responses: Serve Resized Images From Routes

Read article