So I have an Open Source library named Angular-Slickgrid which doesn't have tests yet and I'm trying to use Jest with it but it's really hard to get going with it. The library is a wrapper of and old jQuery datagrid library (SlickGrid) which also uses jQuery UI. I think I got partially over the jQuery problem (not even sure), but jQuery UI still complains. Also note that I'm new to Jest and Unit Testing in Angular but I really want this to work and make my lib safer.
You can see a commit on GitHub of all the code change I made to try implementing Jest with my Open Source lib. The commit is here. Feel free to create a PR if that is easier. I use the previous version of Jest (23.6.0) instead of the latest, because I have other kind of issues with latest.
This is the error I have currently
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)
I tried to use unmock('jquery') and unmock('jquery-ui') but that doesn't seem to help. Here's the test that fails
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();
}));
});
Also my 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",
}
};
and finally a Test Setup to import jQuery globally for Jest
import jQuery from 'jquery';
declare var window: any;
declare var global: any;
window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = jQuery;
What I wish to accomplish is to test at least my Angular Services and the Component creation, that would a good start but I can't get passed the jQuery and jQuery UI issue, even though I don't want to test any of the core library (SlickGrid), neither jQuery, jQuery UI.
from Problems to run any Jest tests with jQuery and jQuery UI
0 komentar:
Posting Komentar