Template Parse Errors (only) When Running Karma Tests

Question

I have a small angular app whose AppComponent methods I'd like to write unit tests for. My application is compiled and runs as expected, but when I try to run the default tests for it (I'm using webstorm, so I switch to Tests in the run/debug configurations dropdown) I'm getting a template parse error related to my html file. Karma reports the offending line as follows:

Failed: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'textarea'. ("
      <div style="height:10px"></div>
      <div style="text-align:center">
        <textarea [ERROR ->][(ngModel)]="data"></textarea>
      </div>
      <div style="height:10px"></div>
    "): ng:///DynamicTestModule/AppComponent.html@13:14

I had this issue when I was first getting started, because I hadn't import FormsModule and added it to @NgModule in my app.module.ts yet (as in here). Is there a test-specific place I need to add that import? I tried importing it to my app.component.spec.ts but that made no difference.

Please give a [mcve], are you sure you're loading the forms module in the tests? — jonrsharpe, May 04 '19 at 14:54

score 0 · Answer 1 · answered May 04 '19 at 14:58

The app.component.spec.ts needed to have the FormsModule imported as well:

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule  // <- important!
      ]
    }).compileComponents();
  }));

Template Parse Errors (only) When Running Karma Tests

1 Answers1