1

I am using angular 9 and replaced the default unit testing of angular to spectator and jest after deep research, its fun and I have few tests that work fine, but suddenly I have this issue when trying to test some parent component, resulting ugly error (see question title) which I can't figure out how to resolve, will be glad for some help, the code is below

other similar tests are working but this one gets the unfriendly msg on the title even when I remove all markup of the template and write just stupid div, and cancel the mocking on the test I still get this bummer... tried restarting servers with no help.

spec.ts


    import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
    import { PlannerScreenComponent } from './planner-screen.component';
    import { SlotsListComponent } from '../planner/components/slots-list/slots-list.component';
    import { MockComponent } from 'ng-mocks';

    describe('PlannerScreenComponent suit', () => {
      let spectator: Spectator<PlannerScreenComponent>;
      const createComponent: () => Spectator<PlannerScreenComponent> = createComponentFactory({
        component: PlannerScreenComponent,
        declarations: [MockComponent(SlotsListComponent)]
      });

      beforeEach(() => (spectator = createComponent()));

      it('should create plannerScreenComponent ', () => {
        const plannerScreenComponent = spectator.component;
        expect(plannerScreenComponent).toBeTruthy();
      });
    });

component.ts


    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'planner-screen',
      templateUrl: './planner-screen.component.html',
      styleUrls: ['./planner-screen.component.scss']
    })
    export class PlannerScreenComponent implements OnInit {
      @Input() isSplittedScreen = false;
      constructor() {}

      ngOnInit() {}
    }

component.html

    section [class.splitted-screen]="isSplittedScreen" class="planner-screen-wrapper">
          <aside class="left-ruller-container"></aside>
          <div class="top-middle-title">
            <div>title</div>
          </div>
          <div class="main-panel-container">
            <slots-list></slots-list>
          </div>
          <aside class="right-ruller-container"></aside>
        </section>
skyboyer
  • 22,209
  • 7
  • 57
  • 64
Shaul Naim
  • 246
  • 3
  • 15

1 Answers1

0

I cannot understand this line in your test

declarations: [MockComponent(SlotsListComponent)]

You are not using SlotListComponent inside your PlannerScreenComponent, so there is no need, to mock this component inside test. I think, that you can freely remove this declarations line. After this, test works ok.

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47