使用ckeditor5的角度测试与开玩笑5

发布于 2025-01-18 15:31:49 字数 2191 浏览 4 评论 0原文

在我的Angular项目中，我尝试使用CKEditor5进行单位测试（使用JEST）一个组件，该组件给我带来以下错误：

模块“共享模块”导入的意外值'ckeditormodule2'。请添加@ngmodule注释

，我知道玩笑不会完全支持ecmascript模块，因此在我的配置中，我添加了ckeditor：

"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.js$"
],

这是我的软件包中的整个开玩笑的配置

"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
  "<rootDir>/setupJest.ts"
],
"moduleNameMapper": {
  "^@core/(.*)": "<rootDir>/src/app/core/$1",
  "^@libs/(.*)": "<rootDir>/src/libs/$1",
  "^@shared/(.*)": "<rootDir>/src/app/shared/$1",
  "^@statemanagement/(.*)": "<rootDir>/src/app/statemanagement/$1",
  "^@assets/(.*)": "<rootDir>/src/assets/$1",
  "^~/(.*)": "<rootDir>/src/$1",
  "\\.(css|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
},
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/dist/"
],
"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.js$"
],
"globals": {
  "ts-jest": {
    "tsconfig": "<rootDir>/tsconfig.spec.json",
    "stringifyContentPathRegex": "\\.html$"
  }
}

。在我的组件模块中导入。我还会在测试中导入共享模块。

我的共享模块中的导入模块：

import {ckeditormodule}来自“@ckeditor/ckeditor5-angular”;

测试文件

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [StateManagementModule, RouterTestingModule, SharedModule],
        declarations: [OrganisationWizardComponent],
        providers: [
          { provide: OrganisationFacade, useFactory: () => instance(mock(OrganisationFacade)) },
        ]
      })
        .compileComponents();
    })
  );

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

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

原文

In my Angular project I am trying to unit test (using Jest) a component using the CKEditor5 which is giving me the following error:

Unexpected value 'CKEditorModule2' imported by the module 'SharedModule'. Please add an @NgModule annotation

I am aware that Jest does not fully support ECMAScript modules, so in my config I added ckeditor:

"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.jsquot;
],

This is the entire jest config in my package.json:

"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
  "<rootDir>/setupJest.ts"
],
"moduleNameMapper": {
  "^@core/(.*)": "<rootDir>/src/app/core/$1",
  "^@libs/(.*)": "<rootDir>/src/libs/$1",
  "^@shared/(.*)": "<rootDir>/src/app/shared/$1",
  "^@statemanagement/(.*)": "<rootDir>/src/app/statemanagement/$1",
  "^@assets/(.*)": "<rootDir>/src/assets/$1",
  "^~/(.*)": "<rootDir>/src/$1",
  "\\.(css|scss)quot;: "<rootDir>/src/__mocks__/styleMock.js"
},
"testPathIgnorePatterns": [
  "<rootDir>/node_modules/",
  "<rootDir>/dist/"
],
"transformIgnorePatterns": [
  "/node_modules/(?!@ckeditor)/.+\\.jsquot;
],
"globals": {
  "ts-jest": {
    "tsconfig": "<rootDir>/tsconfig.spec.json",
    "stringifyContentPathRegex": "\\.htmlquot;
  }
}

The CKEditor module is imported in a shared module which is then imported in my components module. I also import the shared module in my test.

import module in my shared module:

import { CKEditorModule } from "@ckeditor/ckeditor5-angular";

Test file

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [StateManagementModule, RouterTestingModule, SharedModule],
        declarations: [OrganisationWizardComponent],
        providers: [
          { provide: OrganisationFacade, useFactory: () => instance(mock(OrganisationFacade)) },
        ]
      })
        .compileComponents();
    })
  );

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南巷近海 2025-01-25 15:31:49

要模拟模块，您可以使用 MockModule 来自 ng-mocks。

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        // ...
        imports: [
          // ...
          MockModule(CKEditorModule), // <-- a fix
          // ...
        ],
        // ...
      })
        .compileComponents();
    })
  );
});

To mock modules, you can use MockModule from ng-mocks.

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        // ...
        imports: [
          // ...
          MockModule(CKEditorModule), // <-- a fix
          // ...
        ],
        // ...
      })
        .compileComponents();
    })
  );
});

回复收藏 0 原文

~没有更多了~