PHPackages laravel-frontend-presets/karma-eslint - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Testing & Quality](/categories/testing) 4. / 5. laravel-frontend-presets/karma-eslint ActiveLibrary[Testing & Quality](/categories/testing) laravel-frontend-presets/karma-eslint ===================================== Laravel 5.5.x|5.6.x Front-end preset for Karma & ESLint (Unit Testing Vue Component, Code Coverage, ESLint, Babel...) 1.0.0(8y ago)4103MITJavaScript Since Feb 16Pushed 8y ago1 watchersCompare [ Source](https://github.com/laravel-frontend-presets/karma-eslint)[ Packagist](https://packagist.org/packages/laravel-frontend-presets/karma-eslint)[ RSS](/packages/laravel-frontend-presets-karma-eslint/feed)WikiDiscussions master Synced yesterday READMEChangelogDependencies (1)Versions (2)Used By (0) Laravel 5.5.x|5.6.x Frontend Preset for Karma, ESLint ===================================================== [](#laravel-55x56x-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](https://github.com/vuejs-templates/webpack). Configured to use [Karma](https://github.com/karma-runner/karma) as the test runner, [Mocha](https://mochajs.org/) as the testing framework, [Istanbul](https://github.com/gotwarlost/istanbul) as the code coverage tool, [ESLint](https://github.com/eslint/eslint) for javascript linting using [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), all of that while keeping your laravel-mix setup and frontend development experience untouched. Contents -------- [](#contents) - [Installation](#installation) - [Quickstart](#quickstart) - [Screenshot](#screenshot) - [Credits](#credits) - [License](#license) Installation ------------ [](#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](https://yarnpkg.com/en/), 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](https://laravel.com/docs/5.6/frontend) - `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 ---------- [](#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 ---------- [](#screenshot) - `npm test` [![screenshot](https://camo.githubusercontent.com/bb31104bf7a291433443c4848c1b906c2c66d812ce83768a4ad3703e3923ad92/68747470733a2f2f692e696d6775722e636f6d2f754e6c38644d702e706e67)](https://camo.githubusercontent.com/bb31104bf7a291433443c4848c1b906c2c66d812ce83768a4ad3703e3923ad92/68747470733a2f2f692e696d6775722e636f6d2f754e6c38644d702e706e67) Credits ------- [](#credits) - [@m1guelpf](https://github.com/m1guelpf) for the [skeleton preset](https://github.com/laravel-frontend-presets/skeleton) - [vuejs webpack template](https://github.com/vuejs-templates/webpack) contributors. License ------- [](#license) The MIT License (MIT). TODOs ----- [](#todos) - Prompt the user for options other than ESLint Airbnb style guide. ### Health Score 29 β€” LowBetter than 60% of packages Maintenance20 Infrequent updates β€” may be unmaintained Popularity13 Limited adoption so far Community9 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 91.3% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 3007d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/23558090?v=4)[Miguel Piedrafita](/maintainers/m1guelpf)[@m1guelpf](https://github.com/m1guelpf) --- Top Contributors [![MohannadNaj](https://avatars.githubusercontent.com/u/8743700?v=4)](https://github.com/MohannadNaj "MohannadNaj (21 commits)")[![m1guelpf](https://avatars.githubusercontent.com/u/23558090?v=4)](https://github.com/m1guelpf "m1guelpf (2 commits)") --- Tags testinglaravelcoverageeslintpresetkarma ### Embed Badge ![Health badge](/badges/laravel-frontend-presets-karma-eslint/health.svg) ``` [![Health](https://phpackages.com/badges/laravel-frontend-presets-karma-eslint/health.svg)](https://phpackages.com/packages/laravel-frontend-presets-karma-eslint) ``` ### Alternatives [orchestra/testbench Laravel Testing Helper for Packages Development 2.2k39.1M32.1k](/packages/orchestra-testbench)[hotmeteor/spectator Testing helpers for your OpenAPI spec 3021.4M1](/packages/hotmeteor-spectator)[orchestra/workbench Workbench Companion for Laravel Packages Development 8017.0M43](/packages/orchestra-workbench)[guanguans/laravel-soar SQL optimizer and rewriter for laravel. - laravel ηš„ SQL δΌ˜εŒ–ε™¨ε’Œι‡ε†™ε™¨γ€‚ 2227.8k](/packages/guanguans-laravel-soar)[spurwork/spectator Testing helpers for your OpenAPI spec 3021.5k](/packages/spurwork-spectator)[sofa/laravel-kahlan Kahlan specs suite for testing Laravel applications 1524.2k](/packages/sofa-laravel-kahlan) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)