karma-typescript not loading templates and styles

Question

karma-typescript isn't compiling my jade or sass files as webpack normally does. How do I get it the templates to compile so that I can test?

Take the two files below:

messages.ts

import { Component }     from '@angular/core';

@Component({
  selector: 'messages',
  template: require('./messages.jade'),
  styles: [require('./messages.scss').toString()],
})
export class MessagesComponent {

  constructor() {}

}

mesages.spec.ts

import { TestBed, async, inject, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MessagesComponent } from './messages'

describe('MessagesComponent', () => {
    let component: MessagesComponent;
    let fixture:   ComponentFixture<MessagesComponent>;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
            MessagesComponent
        ],
      }).compileComponents();

      fixture = TestBed.createComponent(MessagesComponent);
      component = fixture.componentInstance;

    }));

    it('should be defined', () => {
        expect(component).toBeDefined();
    })
  });

My webpack.config.js has the following rules:

    rules: [
      { test: /\.ts$/, use: ['ts-loader', 'angular2-template-loader'] },
      { test: /\.html$/, use: 'html-loader' },
      { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, use: 'null-loader' },
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.jade$/, use: ['html-loader', 'jade-html-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'] }
    ]

When I run karma, I get the following error:

Failed: This test module uses the component MessagesComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.