Angular2 Material2 Karma Jasmine

Question

I am trying to setup Angular2 Material2 project with Karma and Jasmine. Here is the link to my karma.conf.js. I am able to inject and write tests for components where I haven't used Material2 components but when I use material2 components Karma is complaining. Following is the error that I am getting:

Uncaught ReferenceError: require is not defined at C:/Ram Code/node_modules/@angular2-material/button/button.js:16

Can someone help? I have also tried using other repositories, for example, this one, but no luck so far as Karma still complains the same.

Can someone let me know if I am doing anything wrong, or if there is any working repository that I can refer to? Karma.conf.js file is located here: https://gist.github.com/RamVellanki/dbc03cea46eaa6a9ef656badcd1bbc0e

Answer 1

The problem of your Karma Configuration is, that you're loading the Material Components directly inside of Karma.

All those components / libraries, should be loaded by SystemJS itself.

For example, you're just mapping them inside of your SystemJS configuration.

• https://github.com/DevVersion/material2-plunker/blob/master/src/systemjs.config.js

This is a sample SystemJS configuration, which should be in your case, included into the Karma configuration.

  { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
  { pattern: 'systemjs.config.js', included: true, watched: false},

So now, SystemJS is properly configured and you're able to import them inside of your Source Files.

import { MdButton } from '@angular2-material/button';

So, you don't need to import the components manually (that's not working), because the components are SystemJS modules.