thymikee / jest-preset-angular

Jest configuration preset for Angular projects.
https://thymikee.github.io/jest-preset-angular/
MIT License
883 stars 306 forks source link

Unhandled Promise rejection when loading html files #301

Closed LeoDoldan7 closed 4 years ago

LeoDoldan7 commented 5 years ago

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

{
  "include": ["./src"],
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

setupJest.ts

import 'jest-preset-angular';

jest.config.js

module.exports = {
  globals: {
    tsConfig: './tsconfig.json'
  },
  preset:              'jest-preset-angular',
  snapshotSerializers: [
    'jest-preset-angular/AngularNoNgAttributesSnapshotSerializer.js',
    'jest-preset-angular/AngularSnapshotSerializer.js',
    'jest-preset-angular/HTMLCommentSerializer.js'
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png)$': '<rootDir>/__mocks__/image.js',
    '^@lib/(.*)$':        '<rootDir>/src/lib/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/setupJest.ts']
};

Any idea please? I have look at all the open issues and I was not able to find a solution.

Thank you!

LeoDoldan7 commented 5 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.

ahnpnl commented 5 years ago

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 ?

wtho commented 5 years ago

@LeandroDoldan can you please confirm if it works as described in the readme#custom-tsconfig?

gforceg commented 4 years ago

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.

image

image

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. 🤕

wtho commented 4 years ago

@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!

whizkidwwe1217 commented 4 years ago

@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?

wtho commented 4 years ago

@whizkidwwe1217 please adjust your jest config as described in the readme#custom-tsconfig. If you follow the instructions, it will work.

whizkidwwe1217 commented 4 years ago

@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! 🎉🎉🎉

wtho commented 4 years ago

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!

DavidWz0403 commented 9 months ago

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: ['/setup-jest.ts'], moduleNameMapper: { ...pathsToModuleNameMapper(paths, {prefix: ''}), '^lodash-es$': 'lodash', }, transform: { '^.+\.(ts|js|html|svg)?$': 'jest-preset-angular', }, rootDir: '.', globals: { 'ts-jest': { ...defaults.globals['ts-jest'], tsconfig: '/tsconfig.spec.json', }, }, testEnvironment: 'jsdom', }; " Does anyone know how to resolve this error ? I would appreciate any help !