Vitest: TypeError: `it.skip` is not a function

[Yberion]

Please provide the environment you discovered this bug in.

• https://github.com/Yberion/analog-nx/tree/vitest-skip
• npm i
• npm run test:app

Test located in apps\analog-nx\src\app\app.component.spec.ts

Which area/package is the issue in?

vite-plugin-angular

Description

It seems that https://vitest.dev/guide/filtering.html#skipping-suites-and-tests & co are not working.

Please provide the exception or error you saw

FAIL  src/app/app.component.spec.ts [ src/app/app.component.spec.ts ]
TypeError: it.skip is not a function
 ❯ src/app/app.component.spec.ts:19:8
     17|
     18|   it('should create 1', () => {
     19|     fixture.detectChanges();
       |        ^
     20|     expect(component).toBeTruthy();
     21|   });
 ❯ _ZoneDelegate.invoke ../../node_modules/zone.js/bundles/zone.umd.js:411:30
 ❯ Zone.run ../../node_modules/zone.js/bundles/zone.umd.js:165:47
 ❯ ../../packages/vite-plugin-angular/setup-vitest.ts:41:21
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Other information

Somehow Vitest (describe, it, ...) typing isn't working on VSCode on this repro. It's working fine on my other project with pnpm.

Angular CLI: 17.0.9
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

Angular: 17.0.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.9
@angular-devkit/build-angular   17.0.9
@angular-devkit/core            17.0.9
@angular-devkit/schematics      17.0.9
@angular/cli                    17.0.9
@schematics/angular             17.0.9
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[vneogi199]

Looks like it works after adding this import to the test file: import {describe, beforeEach, it, expect} from 'vitest';.

I'm assuming these are currently defaulting to @nx/jest used by @nx/angular plugin instead of the vitest ones.

[brandonroberts]

Its probably an issue with using the globals. Importing them directly should work fine in most cases

[jahusa02]

Also when I import it or describe because I want to use it.each, fakeAsync doesn't work anymore (ProxyZone Error)

[lukasz-wroblewski]

as @jahusa02 said direct importing causes Error: Expected to be running in 'ProxyZone', but it was not found.

[brandonroberts]

as @jahusa02 said direct importing causes Error: Expected to be running in 'ProxyZone', but it was not found.

Yes, that's correct. You have to use the global functions that are patched correctly to operate inside the Zone.js/ProxyZone context

[jahusa02]

as @jahusa02 said direct importing causes Error: Expected to be running in 'ProxyZone', but it was not found.

Yes, that's correct. You have to use the global functions that are patched correctly to operate inside the Zone.js/ProxyZone context

But what if I want to use it.each together with fakeAsync?

[brandonroberts]

@jahusa02 that should work. You can find the patched methods there

https://github.com/analogjs/analog/blob/beta/packages/vite-plugin-angular/setup-vitest.ts#L251

[jahusa02]

@brandonroberts I have a spec file where I have fakeAsync and "normal" tests.

When I use the patched function (e.g. not importing it via import { it } from 'vitest'), the it.each tests will fail, but the fakeAsync not.

TypeError: Cannot read properties of undefined (reading 'withContext')
 ❯ ../../../packages/vite-plugin-angular/setup-vitest.ts:247:31
 ❯ src/lib/+state/effects/add-pending-contract/add-pending-contract.effects.spec.ts:98:6
     96|       { formStateValid: false, contractId: 'foo', satznummer: null },
     97|       { formStateValid: false, contractId: null, satznummer: 'bar' },
     98|     ])(
       |      ^
     99|       'should not post form values if ContractIds are %j',
    100|       ({ formStateValid, contractId, satznummer }) => {
 ❯ _ZoneDelegate.invoke ../../../node_modules/zone.js/fesm2015/zone.js:365:28
 ❯ ZoneImpl.run ../../../node_modules/zone.js/fesm2015/zone.js:111:43
 ❯ ../../../packages/vite-plugin-angular/setup-vitest.ts:41:21

When I importing it, the fakeAsync tests will fail with the mentioned Error: Expected to be running in 'ProxyZone', but it was not found., but the it.each will pass.

I can't give you a test repo at the moment, but maybe this is enough information for you

[jahusa02]

Hey @brandonroberts,

I know this issue is closed but I can't get the tests working. Still the same problem. Should I open a new Issue?

[brandonroberts]

Hey @brandonroberts,

I know this issue is closed but I can't get the tests working. Still the same problem. Should I open a new Issue?

Sure, if you could add an example that would be great