Laravel 5.5.x|5.6.x Front-end preset for Karma & ESLint (Unit Testing Vue Component, Code Coverage, ESLint, Babel...)
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.
- Fresh install Laravel (5.5.x or 5.6.x) and
cdto your app.
- Install this preset via composer:
composer require laravel-frontend-presets/karma-eslint
php artisan preset karma-eslintfor 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.
yarn installif you are using yarn, and you should 😬).
- 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 testor
npm testrun the unit tests and check out the coverage report generated on
npm run test:watchrun and watch the unit tests/code coverage. watch according to your configured webpack configurations (in
npm run lintrun ESLint and show up the linting errors.
npm run lint:fixrun ESLint and fix the fixable linting errors.
- 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
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
The MIT License (MIT).
- Prompt the user for options other than ESLint Airbnb style guide.