Wondering what’s next for npm?Check out our public roadmap! »

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/karma-material-reporter package

    1.1.2 • Public • Published

    Karma Material Reporter

    CircleCI code style: prettier Join the chat at https://gitter.im/Karma-material-reporter/Lobby codecov semantic-release codacy

    Visualize karma test results in real time with material designed reporter

    Karma Material Reporter


    📑 Test results from each browser are separated out into tabs

    📁 Specs are grouped under suite as expandable menu

    🕙 See the time it took to run individual suite and spec

    🔍 No more clutter between specs and error logs

    Log Error

    🎉 No more browser reload whenever you tweak a test

    Async Test

    ❌ Browser errors are reported in a tidy way

    Browser Error


    1. Install karma-material-reporter as dev dependency
    npm install karma-material-reporter --save-dev
    1. Update karma.conf.js to use karma-material-reporter
    module.exports = function(config) {
       plugins: [
       reporters: ['progress', 'material'],

    Voila! power up your tests with karma and you should see the reporter opeing up in your default browser.

    Availble Configurations

    Option Description Default
    serverPort port in which the reporter startes a express server 3000
    autoOpen whether to open the reporter UI automatically in the default browser true
    expandSuites expand all the expandable suite menus true

    You can change the above options by updating karma.conf.js as showm below

    module.exports = function(config) {
       plugins: [
       materialReporter: {
         serverPort: 3000,
         autoOpen: true,
         expandSuites: true
       reporters: ['progress', 'material'],

    How to Contribute?

    Project Structure

    • The UI is built with angular and angular material which is located in the ui directory
    • The express server files are located in the server directory

    Local Setup

    1. Clone the repo using
    git clone https://github.com/ameerthehacker/karma-material-reporter.git
    1. Install npm dependencies
    npm install
    1. Run the tests
    npm run test

    Running karma-material-reporter in Development

    1. Build the angular UI
    npm run build-ui:watch
    1. Start the reporter with few sample tests
    npm run dev

    ❗️ If you have any ideas or suggestions please feel free to create an issue before jumping into development

    Show your support by ⭐️ the repo


    MIT © Ameer Jhan


    npm i karma-material-reporter

    DownloadsWeekly Downloads






    Unpacked Size

    1.75 MB

    Total Files


    Last publish


    • avatar