Running Tests on your Laravel Projects With Karma, Jasmine & Webpack

You may want to run tests on your Javascript Files Within your Laravel Mix Project, and can’t figure out where to begin. Look no further, with Jasmine, Karma & Webpack, you’ll be up and running in no time.

The aim of this article is to serve as a starting point for getting up and running, and I would not go into much details on why and what to test within your project.

In this Tutorial I would be Using Vue as my JS framework of choice, but feel free to adapt this to whatever you like.

Step 1: Installing Needed Dependencies via NPM

To start up we need to install a couple of node packages via npm. Below are the
packages and karma -* plugins needed to make testing work easily.

“karma”
“jasmine-core”
“karma-jasmine”
“karma-chrome-launcher”
“karma-firefox-launcher”
“karma-phantomjs-launcher”
“karma-webpack”
“karma-babel-preprocessor”

Simply Type this in your shell to install these dependences and save them to your package.json file as Dev Dependencies.

npm install karma jasmine-core karma-babel-preprocessor karma-phantomjs-launcher karma-jasmine karma-webpack karma-firefox-launcher karma-chrome-launcher — save-dev

Step 2: Creating a Config File For Karma (karma.config.js)

Karma is simply put, a javascript test runner that fits all our needs. It is similar to say phpunit for php.
A config file is needed by Karma in order to run your tests, Karma by default assumes a config file with the name “karma.config.js” is created in order to run. This file should be created in the root of your Laravel project, and should contain:

If You do not have a webpack.config file already within the root of your project, create one with this minimal content

Step 3: Write your Tests within Your JS “tests” directory

To allow this make sense, I would go with the approach of creating a Component, Registering it with Vue, writing a basic unit test for that component (which may not make sense nor add value) just to demonstrate the workflow in action.

I am assuming the following
There is an app.js file located in “resources/assets/js/app.js”
There is a “tests” directory created in “resources/assets/js/tests”
I will be putting my unit test in “resources/assets/js/tests/unit”
I will create my test files with a postfixed file extenstion of .spec.js
My components would be located in “resources/assets/js/components”

I will be writing my javascript in ES6/ES2015
My base path where javascript files are created is “resources/assets/js/”
(a) Firstly, Lets Create our Vue Component in “components/Editor.js”

We are simply gonna recreate the Markdown Editor example from Vue’s Website. I am assuming you’ve installed Vue & Marked via NPM.

(a) Let’s register our Component with Vue in “app.js”
This file serves as the entry point into our app, and would be the file compiled down when laravel mix runs:

mix.js('resources/js/app.js', 'public/js');

(b) Lastly Lets Write a simple test for our Component in “tests/Editor.spec.js”

Step 4: Run your Tests with Karma

To run your Test simply type this in your terminal

./node_modules/karma/bin/karma start

You can make this shorter by either creating an alias to karma or simply installing Karma CLI globally through NPM.

npm install -g karma-cli
karma start

Alternatively you can use a wizard to generate a config file via the CLI

karma init karma.conf.js

And thats it. It couldn’t be easier.

However, if you have any suggestions, kindly leave a comment, would love to know how this can be improved upon.