# Angular testing using vitest and testing-library

To test the angular project using vitest and testing-library, first, install the required libraries on devDependencies

```plaintext
- vite
- vitest 
- @testing-library/angular 
- @testing-library/jest-dom 
- jsdom 
- jest-preset-angular
- reflect-metadata
- @swc/core
- unplugin-swc
- @types/testing-library__jest-dom
```

Then we need to create `test-setup.ts` to initialize the testing environment. Zone js doesn't play well with vitest, so we need to make fake zone js (with empty implementation). Noop zone js implementation is from Younes Jaaidi's github, [here](https://github.com/yjaaidi/experiments/blob/versatile-angular/src/app/testing/noop-zone.ts).

```typescript
import './noop-zone'
import 'jest-preset-angular/setup-jest'
import 'reflect-metadata'
import '@testing-library/jest-dom'
```

Configure vite.config.ts

```typescript
import { defineConfig } from 'vite'
import swc from 'unplugin-swc'

export default defineConfig(() => {
  return {
    test: {
      environment: 'jsdom',
      globals: true,
      setupFiles: 'testing/test-setup.ts',
    },
    plugins: [
      swc.vite(),
    ],
    esbuild: false,
  }
})
```

Because we're using `globals: true`, we need to update tsconfig.ts types for typings

```json
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "types": [
      "vitest/globals"
    ]
  }
}
```

For further reference, you can see vitest documentation [here](https://vitest.dev/config/#globals).

Thats it. You can start writing tests. For source code, you can see it on [my github repository](https://github.com/khairuddinniam/blog-angular-testing).