运行任何使用 jQuery 和 jQuery UI 的 Jest 测试的问题

Question

所以我有一个名为 Angular-Slickgrid 的开源库，它还没有测试，我正在尝试将 Jest 与它一起使用，但它真的很难使用。该库是旧 jQuery 数据网格库 (SlickGrid) 的包装器，它也使用 jQuery UI。我想我部分地解决了 jQuery 问题（甚至不确定），但是 jQuery UI 仍然抱怨。另请注意，我是 Angular 中 Jest 和单元测试的新手，但我真的希望它能工作并使我的库更安全。

您可以在 GitHub 上看到我为尝试使用我的开源库实现 Jest 所做的所有代码更改的提交。提交是 here。如果更容易，请随意创建 PR。我使用以前版本的 Jest (23.6.0) 而不是最新版本，因为我在使用最新版本时遇到了其他类型的问题。

这是我目前遇到的错误

FAIL  src/app/modules/angular-slickgrid/components/angular-slickgrid.component.spec.ts
Test suite failed to run 
TypeError: Cannot read property 'ui' of undefined
  at node_modules/jquery-ui-dist/jquery-ui.js:18:10
  at Object.<anonymous>.$.ui (node_modules/jquery-ui-dist/jquery-ui.js:14:3)
  at Object.<anonymous> (node_modules/jquery-ui-dist/jquery-ui.js:16:2)
  at Object.<anonymous> (src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts:11193:1)
  at Object.<anonymous> (src/app/modules/angular-slickgrid/components/angular-slickgrid.component.spec.ts:7:37)

我尝试使用 unmock('jquery') 和 unmock('jquery-ui') 但这似乎没有帮助。这是失败的测试

jest.unmock('jquery');
jest.unmock('jquery-ui');
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { AngularSlickgridComponent } from './angular-slickgrid.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AngularSlickgridComponent
      ],
      providers: [],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

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

还有我的jest.config.js

module.exports = {
  globals: {
    'ts-jest': {
      tsConfigFile: './src/tsconfig.spec.json',
    },
    __TRANSFORM_HTML__: true,
  },
  testMatch: ['**/__tests__/**/*.+(ts|js)', '**/+(*.)+(spec|test).+(ts|js)'],
  setupFiles: ['<rootDir>/test-env.ts'],
  setupTestFrameworkScriptFile: '<rootDir>/node_modules/@angular-builders/jest/src/jest-config/setup.js',
  transform: {
    '^.+\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
  },
  transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
  moduleDirectories: [
    "node_modules",
    "src/app",
  ],
  collectCoverage: true,
  moduleFileExtensions: [
    'ts',
    'json',
    'js'
  ],
  testResultsProcessor: 'jest-sonar-reporter',
  moduleNameMapper: {
    "app/(.*)": "<rootDir>/src/app/",
    "@common/(.*)": "<rootDir>/src/app/common/",
  }
};

最后是为 Jest

全局导入 jQuery 的测试设置

import jQuery from 'jquery';
declare var window: any;
declare var global: any;
window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = jQuery;

我希望完成的是至少测试我的 Angular 服务和组件创建，这将是一个好的开始，但我无法通过 jQuery 和 jQuery UI 问题，即使我不想测试任何核心库 (SlickGrid)，也不想测试 jQuery、jQuery UI。

编辑

感谢@brian-lives-outdoors 在 jQuery 和 jQuery-UI 上的回答，我得到了更多。现在我有另一个小问题 @Inject() 直接在 Constructor 中使用（即将配置传递到我的组件库），我不知道如何解决它，如果有人知道如何请帮忙。

constructor(
  private elm: ElementRef,
  // ... more Services import
  //
  @Inject('config') private forRootConfig: GridOption
) {}

错误是

StaticInjectorError(DynamicTestModule)[config]:
  StaticInjectorError(Platform: core)[config]:
    NullInjectorError: No provider for config!

at NullInjector.get (../packages/core/src/di/injector.ts:43:13)
at resolveToken (../packages/core/src/di/injector.ts:346:20)
...

上次编辑问题的答案

我找到了修复 Constructor 和 @Inject() 的方法，我可以用 beforeEach 中的 overrideComponent() 解决这个问题，如下所示

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AngularSlickgridComponent,
      SlickPaginationComponent
    ],
    providers: [
      // ... all Services
    ],
    imports: [
      RouterTestingModule,
      TranslateModule.forRoot()
    ]
  })
  // THIS LINE is for the @Inject('config')
  .overrideComponent(AngularSlickgridComponent, {
    set: { providers: [{ provide: 'config', useValue: {} }] },
  })
  .compileComponents();
}));

现在我终于可以说我有 Jest 运行！！！

Answer 1

问题是 jQuery 是这样导入的：

import jQuery from 'jquery';

...这不正确并导致 jQuery 成为 undefined.

因为 jQuery 作为 undefined 导入，全局 $ 设置为 undefined，当 jQuery UI 尝试加载时会抛出错误。

这个问题很奇怪，因为用于导入 jQuery 的语法出现了很多，甚至作为官方 TypeScript 文档中 import 语法的示例。

在任何情况下，您都可以通过使用以下语法导入 jQuery 来解决问题：

import * as jQuery from 'jquery';

将您的 test-env.ts 更改为：

import * as jQuery from 'jquery';
declare var window: any;
declare var global: any;
window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = jQuery;

...将 angular-slickgrid.components.ts 的顶部更改为：

// import 3rd party vendor libs
// only import the necessary core lib, each will be imported on demand when enabled (via require)
import 'jquery-ui-dist/jquery-ui';
import 'slickgrid/lib/jquery.event.drag-2.3.0';
import 'slickgrid/slick.core';
import 'slickgrid/slick.grid';
import 'slickgrid/slick.dataview';

// ...then everything else...
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Injectable, Input, Output, OnDestroy, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { GlobalGridOptions } from './../global-grid-options';
// ...

...并将您的 angular-slickgrid.component.spec.ts 更改为：

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { AngularSlickgridComponent } from './angular-slickgrid.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AngularSlickgridComponent
      ],
      providers: [],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

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

  it(`should have as title 'Angular SlickGrid Demo'`, async(() => {
    const fixture = TestBed.createComponent(AngularSlickgridComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Angular SlickGrid Demo');
  }));
});

...这将使您克服最初的 jQuery 错误。

Answer 2

在你的jest.config.js这一行添加：

setupFiles: ['<rootDir>/src/test-env.js']

将您的 test-env.ts 更改为：

import * as jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = jQuery;

import 'jquery-ui/ui/version';
import 'jquery-ui/ui/plugin';
import 'jquery-ui/ui/widget';
import 'jquery-ui/ui/widgets/mouse';

运行任何使用 jQuery 和 jQuery UI 的 Jest 测试的问题

Problems to run any Jest tests with jQuery and jQuery UI

jquery

angular

jestjs

slickgrid

angular-test

运行 任何使用 jQuery 和 jQuery UI 的 Jest 测试的问题

Problems to run any Jest tests with jQuery and jQuery UI

jquery

angular

jestjs

slickgrid

angular-test

运行任何使用 jQuery 和 jQuery UI 的 Jest 测试的问题