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

You may want to run tests on your Javascript Files Within your Laravel Elixir 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.

Note: This was tested with Laravel 5.3 (dev-develop branch), should work if you have your 5.2 or lower project configured to use webpack already. Laravel 5.3 comes with webpack out of the box.

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:

NOTE: Can’t seem to figure out why PhantomJS launcher doesn’t work when writing in ES6. Will Update this when I find a fix.

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 you run :

mix.webpack('app.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.