使用Jest测试Angular共享库

fslejnso  于 12个月前  发布在  Jest
关注(0)|答案(1)|浏览(164)

我有一个具有以下结构的angular库

projects/
   |..... app/
       |..... src/
          |..... app/       
              |..... app.component.spec.ts
              |..... app.component.ts
              |..... app.module.ts    
   |..... lib/
       |..... sso/
          |...... index.ts
          |...... ng-package.json
          |...... ...
          |...... sso.service.ts
          |...... ss.module.ts
       |..... ui/
          |...... menu/
              |...... menu.component.ts
              |...... menu.service.ts
              |...... menu.module.ts
          |...... index.ts
          |...... ng-package.json
       |..... ng-package.json
       |..... package.json
   |..... jest.config.ts
   |..... package.json

字符串
我想测试我的app.component

// app.component.ts

import {SSOService} from "my-lib/sso";

@Component({
  selector: 'app-root',
  template: `
    <my-menu>
      <router-outlet></router-outlet>
    </my-menu>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(protected ssoService: SSOService) { }
}


这里是我目前的测试

// app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import {SSOService} from "my-lib/sso";
import {MenuComponent} from "my-lib/ui";

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent, MenuComponent
      ],
      providers: [
        {
          provide: SSOService,
          useValue: {
            setRoles: jest.fn()
          }
        }
      ]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});


我不得不模仿我的sso_service,即使它在同一个项目中!但仍然有同样的问题与MenuComponent

● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'toLowerCase')

      289 |         }] });
      290 |
    > 291 | registerLocaleData(FR);
          | ^
      292 | /**
      293 |  * Custom date adapter for Angular Material.
      294 |  *

      at registerLocaleData (node_modules/@angular/core/fesm2022/core.mjs:22410:25)
      at registerLocaleData (node_modules/@angular/common/fesm2022/common.mjs:2562:12)
      at Object.<anonymous> (dist/lib/fesm2022/my-lib-ui.mjs:291:1)
      at Object.<anonymous> (projects/app/src/app/app.component.spec.ts:5:1)


我也不想嘲笑这个组件,可能是库或Jest Config有问题吗?
PS:在迁移到jest之前,测试在karma上运行良好
请在下面找到不同的配置文件

// lib/ui/index.ts
import { CommonMenuService } from './menu/menu.service';

export * from './menu/menu.component';
export * from './menu/menu.module';
export * from './menu/menu.service';

// lib/ui/ng-package.json
{
  "lib": {
    "entryFile": "index.ts"
  }
}
// lib/ui/pacakge.json
{
  "name": "my-lib",
  "version": "2.5.2",
  "peerDependencies": {
    "@angular/cdk": "^17.0.0",
    "@angular/common": "^17.0.1",
    "@angular/core": "^17.0.1",
    "@angular/material": "^17.0.0",
    "@awesome-cordova-plugins/in-app-browser": "^6.3.0",
    "@capacitor/device": "^5.0.6",
    "angular-oauth2-oidc": "^15.0.1",
    "jwt-decode": "^4.0.0"
  },
  "dependencies": {
    "tslib": "^2.6.2"
  },
  "sideEffects": false,
  "exports": {
    ".": {
      "sass": "./styles/_index.scss"
    }
  }
}

的字符串
这是我的Jest.config

// jest.config.ts

import type { Config } from 'jest';

const config: Config = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8',
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default config;


我的tslog.json看起来像这样

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "paths": {
      "my-lib/*": ["projects/lib/*"],
      "my-lib": ["projects/lib"]
    },
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

brgchamk

brgchamk1#

我想我已经找到了我的问题的答案!它似乎比写问题本身更快^^“
答案就在这篇文章https://fireflysemantics.medium.com/unit-testing-your-angular-library-project-with-jest-42429a8716eb
在我的tslog.json我有

// tsconfig.json

    "paths": {
      "my-lib/*": ["projects/lib/*"],
      "my-lib": ["projects/lib"]
    },

字符串
因此,我必须在jest配置中添加以下内容

// jest.config.ts

  moduleNameMapper: {
    "^my-lib/(.*)$": "<rootDir>/projects/lib/$1",
    "^my-lib/": "<rootDir>/projects/lib/",
  },


耶!它现在起作用了

相关问题