Angular Spectator, cannot use custom matchers

Question

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.

Answer 1

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.

Answer 2

I also had the same problem recently and found an explanation on this page: Jest Support.

Instead of:

import '@ngneat/spectator/jest';

you can just change the default import to include /jest at end.

If you have something like:

import { SpectatorPipe, createPipeFactory } from '@ngneat/spectator';

change it to:

import { SpectatorPipe, createPipeFactory } from '@ngneat/spectator/jest';