Jest如何測試Angular組件

要使用Jest測試Angular組件，請按照以下步驟操作：

1. 安裝必要的依賴項：

確保已經安裝了Angular CLI和Jest。然后，在項目根目錄中運行以下命令來安裝所需的依賴項：

ng add @angular-builders/jest
npm install --save-dev jest-preset-angular @types/jest

2. 配置Jest：

在項目根目錄中創建一個名為jest.config.js的文件，并添加以下內容：

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  transform: {
    '^.+\\.(ts|html)$': 'ts-jest',
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
};

3. 更新tsconfig.spec.json：

將tsconfig.spec.json中的compilerOptions部分修改為：

"compilerOptions": {
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "moduleResolution": "node",
  "strict": true,
  "sourceMap": true,
  "declaration": false,
  "downlevelIteration": true,
  "experimentalDecorators": true,
  "noImplicitAny": false,
  "strictNullChecks": false,
  "importHelpers": true,
  "target": "es2015",
  "module": "commonjs",
  "lib": ["es2018", "dom"],
  "baseUrl": ".",
  "paths": {
    "@/*": ["src/*"]
  }
},

4. 編寫組件測試：

現在可以開始編寫組件測試了。例如，假設有一個名為app.component.ts的組件，可以創建一個名為app.component.spec.ts的測試文件。以下是一個簡單的測試示例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

  it(`should have as title 'my-app'`, () => {
    expect(component.title).toEqual('my-app');
  });

  it('should render title', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('my-app app is running!');
  });
});

5. 運行測試：

要運行測試，請在項目根目錄中使用以下命令：

ng test

這將運行Jest測試并顯示結果。現在已經成功地使用Jest測試了Angular組件。