DEV Community

Cover image for Faster testing with Angular and Vitest ⚡️

Faster testing with Angular and Vitest ⚡️

Brandon Roberts on December 08, 2023

In the Angular ecosystem, there are a few recommended tools used to run unit tests including Karma, Jasmine, and Jest. Karma and Jasmine have been ...
Collapse
 
jefftopia profile image
Jeff

Does your Angular application need to also be an Analog application to utilize the analogjs/vite-plugin-angular, or can any angular app use vitest with that plugin for testing?

Collapse
 
brandontroberts profile image
Brandon Roberts • Edited

Great question. Any Angular application can use the Vite plugin with Vitest for testing. It doesn't have to be an Analog application.

Collapse
 
codeofarmz profile image
codeOfArmz

That's great, but in this case - would it be possible to make a schematic for ng add?

Thread Thread
 
brandontroberts profile image
Brandon Roberts

Sure, its possible. It could do

ng add @analogjs/platform --project project-name
Enter fullscreen mode Exit fullscreen mode

And it could give you a prompt to setup Vitest support for you

Thread Thread
 
amosisaila profile image
Amos Isaila

In a normal Angular app do we have to install analog to be able to use vitest?

Thread Thread
 
brandontroberts profile image
Brandon Roberts

Currently, yes. There's no official support from the Angular team for Vitest. As previously commented, you can only use Analog for the testing integration if you prefer.

Thread Thread
 
amosisaila profile image
Amos Isaila

It won't increase my build?

Collapse
 
carniatto profile image
Mateus Carniatto

Hello Brandon, great content. Is there an option to use Cypress instead of Playwright?

Collapse
 
brandontroberts profile image
Brandon Roberts

Thanks Mateus. Currently, Cypress is not an option for browser testing. The list of currently supported options is here.

vitest.dev/guide/browser#cross-bro...

Collapse
 
timsar2 profile image
timsar2

How can I add vitest to nx multi app?
the command :
nx g @nx/angular:ng-add @analogjs/platform --project project-name
not working for me

Collapse
 
brandontroberts profile image
Brandon Roberts

The correct command after installing the package is

nx g @analogjs/platform:setup-vitest --project project-name
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrs_vettori_145d6d61c3 profile image
Andrés Vettori • Edited

Hi, installed the NPM package without issues, but when trying to configure vitest with:

ng g @analogjs/platform:setup-vitest --project my-project-name

I get an error: Cannot read properties of undefined (reading 'root')

What I'm doing wrong? As "my-project-name" I'm using the value of the property "name" in the package.json file.

Thanks in advance,

Agv

Collapse
 
brandontroberts profile image
Brandon Roberts • Edited

You should use the name of your project from the angular.json file

{
  "projects": {
    "your-project-name-here": {..} 
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
samkcfam_2b1ce78380ebb96f profile image
samkcfam

What about code coverage. How do you setup code coverage with ViteTest in Angular?

Collapse
 
aelbore profile image
Jay

Does this needs require rxjs version 7+?

Collapse
 
aelbore profile image
Jay • Edited

i just found out using jsdom and happy-dom it only works with rxjs 7+
using Playwright it works with rxjs 6.x

not sure if this is issue with analogjs or vite/vitest
with jsdom and happy-dom

Image description