Closed LeoDoldan7 closed 4 years ago
Example test:
import { AppModule } from './app.module';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [AppModule]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
});
The compileComponents
method is what fails.
Hi, I see your global object in jest config looks a bit strange. Could you please to try the global object in README, expose configuration section ?
@LeandroDoldan can you please confirm if it works as described in the readme#custom-tsconfig?
I had this same issue and the configuration in readme#custom-tsconfig resolved all of the html related errors I was getting. But the nativeElement is completely empty so I believe the html templates are not really being rendered. These tests worked before switching to jest.
Maybe I'm doing this wrong, perhaps this should be an e2e test, the test is checking to see that a child component contains the title that is passed into it from app.component. Still, even if this should be an e2e test, shouldn't the template still render? Is this a limitation of jest / jsdom?
UPDATE
It looks like the issue has to do with jsdom not populating innerText or textContent node properties. Sorry for adding this completely separate issue to the discussion. 🤕
@gforceg yeah, jsdom and jest are faster, but that comes at a cost. They do not offer the full functionality that a fully-fledged browser does. I am not sure on textContent
though, maybe there is a way to get it. Some googling should do.
@LeandroDoldan is your problem solved? It would be great if you closed this issue then. Cheers!
@wtho I'm also currently facing this issue when running test for my repo https://github.com/whizkidwwe1217/jest-test.git however the errors go away when I move the html template url to an inline template. Is there an option to support templateUrl/stylesUrls?
@whizkidwwe1217 please adjust your jest config as described in the readme#custom-tsconfig. If you follow the instructions, it will work.
@wtho Thank you so much! I've been digging answers in Stackoverflow for days and still haven't get my tests working until you pointed me to the readme link. Thank you! 🎉🎉🎉
I close this issue for now. In the initial issue description the globals.ts-jest
the astTransformers are clearly missing, which will throw the error given in this issue.
@LeandroDoldan Feel free to re-open if your problem still persists. Cheers!
I have the same issue right now "AppComponent › should create the app
Uncaught (in promise): Failed to load app.component.html
at resolvePromise (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1262:35)
at resolvePromise (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1216:21)
at ../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1329:21
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:443:35)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4798:33)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3858:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:442:64)
at Zone.Object.<anonymous>.Zone.runTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:214:51)
at drainMicroTaskQueue (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:632:39)
at ZoneTask.Object.<anonymous>.ZoneTask.invokeTask [as invoke] (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:529:25)
at invokeTask (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1727:22)
at globalCallback (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1770:35)
at XMLHttpRequest.globalZoneAwareCallback (../node_modules/.pnpm/zone.js@0.11.7/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1794:20)
at XMLHttpRequest.callTheUserObjectsOperation (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at XMLHttpRequestImpl._dispatch (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at fireAnEvent (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
at Request.<anonymous> (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:890:5)
at IncomingMessage.<anonymous> (../node_modules/.pnpm/jsdom@16.7.0_canvas@2.9.3/node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:230:42)
Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 5.794 s Ran all test suites matching /app.component.spec.ts/i" My dependencies : ""dependencies": { "@angular/animations": "12.2.7", "@angular/common": "12.2.7", "@angular/compiler": "12.2.7", "@angular/core": "12.2.7", "@angular/forms": "12.2.7", "@angular/platform-browser": "12.2.7", "@angular/platform-browser-dynamic": "12.2.7", "@angular/router": "12.2.7", "@auth0/auth0-spa-js": "1.22.2", "@briebug/jest-schematic": "3.1.0", "@ungap/structured-clone": "1.0.1", "bootstrap": "4.6.2", "chart.js": "2.9.4", "date-fns": "2.28.0", "ng2-charts": "2.4.3", "ng2-date-picker": "9.0.0", "ngx-toastr": "14.3.0", "pretty-format": "27.5.1", "rxjs": "7.4.0", "tslib": "2.3.1", "zone.js": "0.11.7" }, "devDependencies": { "@angular-builders/jest": "12.1.2", "@angular-devkit/build-angular": "12.2.7", "@angular/cli": "12.2.7", "@angular/compiler-cli": "12.2.7", "@angular/language-service": "12.2.7", "@types/chart.js": "2.9.37", "@types/jasmine": "3.5.14", "@types/jasminewd2": "2.0.10", "@types/jest": "27.0.2", "@types/node": "14.14.33", "@types/ungap__structured-clone": "0.3.0", "html-loader": "3.1.2", "canvas": "2.9.3", "concurrently": "6.2.2", "eslint": "6.8.0", "gts": "3.1.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "jest": "27.2.4", "jest-diff": "27.5.1", "jest-preset-angular": "10.0.1", "json-server": "0.16.3", "pkg-dir-cli": "2.1.0", "prettier": "1.19.1", "protractor": "7.0.0", "ts-jest": "27.0.5", "ts-node": "10.1.0", "typescript": "4.3.5" } } " I can not access the custom-ts config anymore in the jest-preset-angular README. This is my ts.config.json "{ "extends": "./node_modules/gts/tsconfig-google.json", "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "allowSyntheticDefaultImports": true, "lib": [ "es2019", "dom" ], "paths": { "src/" : ["./src/"] } }, "angularCompilerOptions": { "disableTypeScriptVersionCheck": true, "fullTemplateTypeCheck": true, "allowSyntheticDefaultImports": true, "strictInjectionParameters": true } }", and this is my jest.config.js "require('jest-preset-angular/ngcc-jest-processor'); const {pathsToModuleNameMapper} = require('ts-jest/utils'); const {paths} = require('./tsconfig.json').compilerOptions; const {defaults} = require('jest-preset-angular/presets');
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['
Hello! We moved from Karma to Jest using this guide: https://blog.angularindepth.com/integrate-jest-into-an-angular-application-and-library-163b01d977ce
All our tests are failing with the same error:
Unhandled Promise rejection: Failed to load xxxxxx.component.html ; Zone: ProxyZone ; Task: Promise.then ; Value: Failed to load xxxxxx.component.html undefined
I was wondering if we may have something configured incorrectly.
tsconfig.json
setupJest.ts
jest.config.js
Any idea please? I have look at all the open issues and I was not able to find a solution.
Thank you!