Laravel 5.5.x|5.6.x Frontend Preset for Karma, ESLint

Laravel Preset for using Karma, ESLint (Airbnb), along with your built in laravel-mix & Vue.js setup, to get a working unit testing & code coverage for your JS assets.

The setup in this preset was extracted/modified from Vue.js webpack template. Configured to use Karma as the test runner, Mocha as the testing framework, Istanbul as the code coverage tool, ESLint for javascript linting using Airbnb JavaScript Style Guide, all of that while keeping your laravel-mix setup and frontend development experience untouched.

Contents

• Installation
• Quickstart
• Screenshot
• Credits
• License

Installation

1. Fresh install Laravel (5.5.x or 5.6.x) and cd to your app.
2. Install this preset via composer: composer require laravel-frontend-presets/karma-eslint
3. Use php artisan preset karma-eslint for scaffolding this preset. You will be prompted for confirmation of copying the files and overriding the existing ones. It's highly recommended to use this preset at the initial instantiation of your laravel project, otherwise, commit your changes before using it.
4. npm install (or yarn install if you are using yarn, and you should 😬).
5. discover the npm scripts:

• npm run [dev|watch|hot|prod] is the standard commands shipped with the fresh laravel, check out the relevant laravel documentation
• npm run test or npm test run the unit tests and check out the coverage report generated on /coverage.
• npm run test:watch run and watch the unit tests/code coverage. watch according to your configured webpack configurations (in webpack.mix.js).
• npm run lint run ESLint and show up the linting errors.
• npm run lint:fix run ESLint and fix the fixable linting errors.

6. The preset will create a directory at the root of your project called specs, this is your entry point for writing JS unit tests.

Note: it's named specs for differentiation from your backend php tests directory. it's up to you if you want to change this you will have to modify the path at the test npm script and the path at the tests entry point specs/setup/index.js which is called from the karma config file at specs/setup/karma.conf.js.

Quickstart

laravel new my-app && cd my-app
composer require laravel-frontend-presets/karma-eslint
php artisan preset karma-eslint
y # copying files confirmation
npm install
npm test

Screenshot

• npm test

Credits

• @m1guelpf for the skeleton preset
• vuejs webpack template contributors.

License

The MIT License (MIT).

TODOs

• Prompt the user for options other than ESLint Airbnb style guide.