Search code examples
angularunit-testingangular-spectatorspectator

Angular Spectator, cannot use custom matchers


I am trying to use spectator to test my Angular components. I want to use one of the custom matchers but I get the error Property 'toBeEmpty' does not exist on type 'JestMatchersShape<Matchers<void, Element>, Matchers<Promise<void>, Element>>'.

The component is really simple and this is the simple test:

  import { FormControl } from '@angular/forms';
  import { Spectator, createComponentFactory } from '@ngneat/spectator';

  import { imports } from '../../shared.module';

  import { InputComponent } from './input.component';

  describe('InputComponent', () => {
    let spectator: Spectator<InputComponent>;
    const createComponent = createComponentFactory({
      component: InputComponent,
      imports: imports,
    });

    describe('label', () => {
      it('should not show when not passed', () => {
        spectator = createComponent({
          props: {
            control: new FormControl(),
          },
        });

        const matLabel = spectator.query('mat-label');

        expect(matLabel).toBeEmpty(); // <-- Error here
      });
    });
  });

I read spectator's documentation and didn't say anything about import the custom matchers, also the examples in internet they don't mention about anything to do before using them.


Solution

  • I solved my issue.

    I tried to import the custom matchers like this:

       import { toBeEqual } from '@ngneat/spectator'; 
    

    But I was getting the same error. Reading other answers about mocking the Angular Router with spectator I noticed an import:

       import '@ngneat/spectator/jest';
    

    I didn't find instructions about it in order to use the custom matchers.

    Anyway, it solves my issue.