Bind not working with Jest

[2paedev]

Hi!

I'm working with this nice library in older projects with Jasmine but in a new project with Angular(Nx)+Jest I have some problems to make simple tests. For example:

TEMPLATE

{{ title }}

*TS import { Component, Input, OnInit} from '@angular/core';

@Component({ selector: 'subform-header', templateUrl: './subform-header.component.html', styleUrls: ['./subform-header.component.scss'] }) export class AcpSubformHeaderComponent implements OnInit { @Input() title: string; ngOnInit() {} }

TEST const bind = { title: 'A title', showBackButton: true };

it('should show correct message.', async () => { const { find } = await shallow.render({ bind }); expect(find('.subform-header--title').nativeElement.innerText).toBe( 'A title' ); });

The result is always the same: find('.subform-header--title').nativeElement.innerText == undefined

This same test with Angular+Jasmine applications works, but this time don't working. Do you know one solution for this?

Thanks in advance!

[getsaf]

I'd be happy to help. I'm not able to get the full context from this post could you provide a working example in StackBlitz, just fork from this test and post a link to your example. From your description, it sounds like it's probably something something simple.

[2paedev]

Hi @getsaf , thanks for the response. I made this Stackblitz --> https://stackblitz.com/edit/github-856te1?file=examples/component-with-bindings.spec.ts . The file is "component-with-bindings". With Jasmine it works fine but in the project I'm working with NX (Angular 9) + Jest the content of "find ('.subform-header--title'). nativeElement.innerText" is always undefined. A Little bit weird.

[getsaf]

Thanks for the stackblitz, it looks like pretty basic usage of bind and you're using it correctly.

I was not able to reproduce the issue in Angular 9 or 10

• NG9 On this branch: https://github.com/getsaf/ng9-shallow-test/pull/new/use-jest-test-bind
• NG10 Example repo here

This may be an issue with a specific version of Angular/Shallow. Would you be able to post your Angular/Shallow-render versions from your package.json? I can try to reproduce with those specific versions.

[2paedev]

Hi again! You can check the issue if you make a basic installation of Nx with Angular + Jest. https://nx.dev/angular/tutorial/01-create-application

The package.json looks like:

"dependencies": { "@angular/animations": "^9.0.0", "@angular/cdk": "^9.0.0", "@angular/common": "^9.0.0", "@angular/compiler": "^9.1.7", "@angular/core": "^9.1.7", "@angular/forms": "^9.1.7", "@angular/material": "^9.2.3", "@angular/material-moment-adapter": "^9.2.3", "@angular/platform-browser": "^9.1.7", "@angular/platform-browser-dynamic": "^9.1.7", "@angular/router": "^9.1.7", "@material/layout-grid": "^5.0.0", "@nestjs/common": "^6.8.3", "@nestjs/config": "^0.4.2", "@nestjs/core": "^6.8.3", "@nestjs/microservices": "^7.0.13", "@nestjs/platform-express": "^6.8.3", "@nestjs/terminus": "^7.0.1", "@ngx-translate/core": "^12.1.1", "@nrwl/angular": "~9.0.0", "cache-manager": "^3.3.0", "core-js": "^2.5.4", "json-formatter-js": "^2.3.4", "jsrsasign": "^8.0.12", "lodash": "^4.17.15", "messageformat": "^2.3.0", "nest-winston": "^1.3.3", "nestjs-session": "^1.0.1", "ngx-translate-messageformat-compiler": "^4.7.0", "reflect-metadata": "^0.1.13", "rxjs": "~6.5.0", "ts-interface-checker": "^0.1.11", "tslib": "^1.10.0", "uuid": "^8.1.0", "winston": "^3.2.1", "zone.js": "^0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.1", "@angular-devkit/build-ng-packagr": "~0.900.1", "@angular/cli": "9.0.1", "@angular/compiler-cli": "^9.1.7", "@angular/language-service": "^9.1.7", "@nestjs/schematics": "^6.7.0", "@nestjs/testing": "^6.8.3", "@nrwl/cypress": "~9.0.0", "@nrwl/jest": "~9.0.0", "@nrwl/nest": "~9.0.0", "@nrwl/node": "~9.0.0", "@nrwl/workspace": "~9.0.0", "@types/cache-manager": "^2.10.3", "@types/jest": "24.0.9", "@types/jsrsasign": "^8.0.2", "@types/node": "~8.9.4", "codelyzer": "^5.2.2", "cypress": "^3.8.2", "dotenv": "6.2.0", "eslint": "6.1.0", "jest": "24.1.0", "jest-preset-angular": "8.0.0", "lcov-result-merger": "^3.1.0", "mkdirp": "^1.0.3", "ng-packagr": "^9.1.3", "prettier": "^2.0.5", "prettier-plugin-organize-imports": "^1.0.4", "scss-bundle": "^2.5.1", "shallow-render": "^9.0.5", "ts-interface-builder": "^0.2.2", "ts-jest": "24.0.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.7.4" }

I think there are a problem with this kind of project.

Thanks so much!

[getsaf]

I just created an nx project with shallow per those docs and bind worked fine in the project. I even backed down my version of jest to match yours and the tests still ran fine.

All I did was npm i -D shallow-render@9 and changed the component/test.

These are the only changes that were made from the vanilla NX project. https://github.com/getsaf/shallow-render-nx/commit/54eca2141b95acbdefdcb55c52d7b24f4c3a5616

Any other ideas on how to reproduce the issue?

[2paedev]

Hi @getsaf , I found the error. the problem was that I was using nativeElement.innerText instead of nativeElement.textContent. With innerText the result is undefined but in other old project, I always used it like that. Thanks for your patience and great job with this lib, I'm using it in all my angular projects, my life is a little bit better ;)

[getsaf]

Oh man, I didn't even know that about textContent I just glossed over that part. Thanks for the update and I don't mind if issues are solved this way. This exchange may help someone else in the future when they look through old issues.