Итак, у меня есть библиотека с открытым исходным кодом с именем Angular-Slickgrid , в которой еще нет тестов, и я пытаюсь использовать Jest с ней, но с ней действительно трудно разобраться.Библиотека является оболочкой старой библиотеки jQuery datagrid (SlickGrid), которая также использует пользовательский интерфейс jQuery.Я думаю, что частично справился с проблемой jQuery (даже не уверен), но пользовательский интерфейс jQuery все еще жалуется.Также обратите внимание, что я новичок в Jest и модульном тестировании в Angular, но я действительно хочу, чтобы это сработало и сделало мою библиотеку более безопасной.
Вы можете увидеть фиксацию на GitHub всех изменений кода, которые я сделал, чтобы попытаться реализоватьШутка с моей открытой исходной библиотекой.Коммит здесь .Не стесняйтесь создавать пиар, если это проще.Я использую предыдущую версию 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/$1",
"@common/(.*)": "<rootDir>/src/app/common/$1",
}
};
и, наконец, тестовая установка для глобального импорта jQuery для Jest
import jQuery from 'jquery';
declare var window: any;
declare var global: any;
window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = jQuery;
Что яЯ хотел бы выполнить это, по крайней мере, протестировать мои Angular Services и создание Компонента, это было бы хорошим началом, но я не могу обойти проблему с пользовательским интерфейсом jQuery и jQuery, даже если я не хочу тестировать какую-либо из базовой библиотеки (SlickGrid), ни jQuery, ни пользовательский интерфейс jQuery.
РЕДАКТИРОВАТЬ
Благодаря @ brian-life-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(), я могу сделать это с overrideComponent() внутри beforeEach, как показано ниже
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 !!!