How to use the custom matchers?

[JohanHeyvaert]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

My apologies if this is a stupid question, I don't have a lot of xp with angular testing.

In my (jest powered) test I am trying to use the toBeFocused() matcher (cf. https://github.com/ngneat/spectator#custom-matchers) but it isn't found on the element retrieved by the query. The error is:

Property 'toBeFocused' does not exist on type 'JestMatchersShape<Matchers<void, HTMLInputElement>, Matchers<Promise, HTMLInputElement>>'

What am I doing wrong?

Expected behavior

I think that toBeFocused() should be available for an HTMLInputElement?

Minimal reproduction of the problem with instructions

  let host: SpectatorHost<MyInputComponent>;
  const createHost = createHostFactory({
    component: MyInputComponent
  });
...

      host = createHost(`<my-input></my-input>`);
      const $input = host.queryHost(`input`) as HTMLInputElement;
      $input.focus();
      expect($input).toBeFocused(); // Compilation error
      expect($input).toHaveProperty('value', 'test123');

Environment

Angular version: 10.1.6
@ngneat/spectator: 6.0.0
@nrwl/jest: 10.3.1
@types/jest: 26.0.15
jest: 26.6.0
jest-preset-angular: 8.3.1
ts-jest: 26.4.1

[NetanelBasal]

@JohanHeyvaert can you provide a reproduction of this, please?

@bogusweb, did you checked that your latest change didn't cause regressions in our custom matchers?

[bogusweb]

@NetanelBasal @JohanHeyvaert It's a little strange, because the library itself has a few tests that check this function and in the library the tests pass correctly. But in my project where I use the latest version I also get error such as @JohanHeyvaert. After a little analysis, I have no idea what could have happened here :/ I try analysis more this tomorrow

[bogusweb]

@NetanelBasal its super weird, just write simple test in my project:

  it('Testing spectator matches', () => {
    const input = spectator.query<HTMLInputElement>('input');
    input.focus();
    expect(input).toBeVisible();
    expect(input).toBeFocused();
  });

and passed, I will still try to reproduce this bug using hostFactory.

[bogusweb]

okay, i have no idea why this not work for @JohanHeyvaert.
I create simple repo with small reproduce, https://github.com/bogusweb/test-matchers and unit tests via jest passing.

[NetanelBasal]

You don't have a type error?

[JohanHeyvaert]

Thank you for your efforts. I still don't know why its not working in my project.
I'll further investigate the problem.

Thanks for the sample repository, that could be really helpful.

[JohanHeyvaert]

Mmmm, searched but still don't understand.

It doesn't seem to be caused by a version issue: tried to use in my project the same versions as the sample project: not working. Tried to use in the sample project the same versions as in my project: keeps working.

The configuration was a bit different:

• root jest.config.js my project:

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
};

• in the sample project:

const nxPreset = require('@nrwl/jest/preset');

module.exports = { ...nxPreset };

But using that same config doesn't fix the problem. That difference is probably caused because we started the project with an older version of Nx.

I don't have time anymore to continue searching now. Will be continued.
I'll try to extract a minimal reproducable version from my project (I can't disclose the project itself).

[JohanHeyvaert]

Ah yes, I don't really understand how typescript is supposed to know where to find these custom matchers?

• If I F12 in the sample project on .toBeFocused(), it opens matchers-types.d.ts from @ngneat/spectator.
• When I F12 on for instance .toBeGreaterThan(), then it opens index.d.ts from @types/jest.
• My project doesn't seem to know matchers-types.d.ts from @ngneat/spectator, I only get intelllisense suggestions from @types/jest.

[Wykks]

Hi!

I encountered the same issue, and for now I'm not sure what's causing this...

Minimal reproduction: https://github.com/Wykks/spectator-jest-issue-358 (tested : Angular 10 & Angular 11 everything up to date)

Interestingly, in my project vscode was not reporting any issue, just like you Johan. But in this minimal reproduction I actually see the error in vscode.

[AndreasHae]

I'm experiencing a similar issue. We have two projects, one using spectator 5.13.3, and one using spectator 6.1.0. In 5.13.3, all matchers work as expected. In 6.1.0, my IDE (WebStorm) is unable to find the custom matchers. Is there anything that needs to be configured? I looked at the documentation and couldn't find anything.

[bogusweb]

@Wykks Hi, you have one error in the example that makes it not work. It is clearly stated in the documentation that when you want to use spectator with jest for testing you should improve your imports, here https://github.com/ngneat/spectator#jest-support.

After update import from import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator'; to import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator/jest'; tests passed :)

[bogusweb]

@AndreasHae check import, if u use jest u need import from @ngneat/spectator/jest instead of @ngneat/spectator

With correct import

With non correct import

[Wykks]

Oh wow this is embarrassing. I was so sure about importing @ngneat/spectator/jest, that I forgot to check it...

It's because I didn't set jest: true in the pipe schematics 😓

(And for some reason, when vscode is "used to" @ngneat/spectator/jest, if it's not jest in one file it doesn't catch the issue either...)

[JohanHeyvaert]

"Embarrassing" is the good word. Same problem & solution on my end. My apologies for all the fuzz!

[twjacobsen]

Sorry to "necro-post", but I'm seeing this issue as well, but only when I import expect from @jest/globals which (I think) is going to be a recommended approach in the future (to avoid misusing global/implicit scopes). If I remove my direct imports from @jest/globals it works just fine - so I'll do that now - but it's just a heads up that this might break more things in the future.

[johncrim]

@twjacobsen - I ran into the same issue with @jest/globals. It seems this is a general problem with using jest + ESM - no expect/matcher extensions work when using @jest/globals. I opened this issue:

jestjs/jest#12267