Cannot read property 'textContent' of null Angular Testing

问题

I have simple angular application with AppComponent and ProductComponent. When I run ng test command, getting below error on http://localhost:9876/?id=80860281

Jesmine 3.5.0Options
finished in 0.473s
4 specs, 1 failure, randomized with seed 16102
Spec List | Failures
AppComponent > should render title
TypeError: Cannot read property 'textContent' of null
at <Jasmine>
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:33:51)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:123:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:545:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:560:1)
at <Jasmine>

This is my code

app.module.ts class

@NgModule({
declarations: [
AppComponent,
ProductComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule 
],
providers: [],
bootstrap: [AppComponent]})

app.component.ts class

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Product';
}

files app.component.spec.ts and product.component.spec.ts have the default code. I didn't modified those files.

app.component.spect.ts file code

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'Assignment01`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('Assignment01');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('Product app is running!');
    });
});

product.component.ts file

export class ProductComponent implements OnInit {
constructor() { }

productName:any
quantity:any

public data:any[]=[
{
    "ID": 101,
    "Product": "Moto G",
    "Quantity": 2,
},
{
    "ID": 102,
    "Product": "TV",
    "Quantity": 4,
},
{
    "ID": 105,
    "Product": "Watch",
    "Quantity": 2,
},   
]

ngOnInit(): void {} 

addItem() {
this.data.push({ Product: this.productName, Quantity: this.quantity});
} 

product.component.html file

<div>  
    <h1>Demonstration of Built in directives and data binding</h1>
    <br>
    <h2>Product List</h2>
    <table border="1"  *ngIf='data && data.length'>
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
          <tr *ngFor='let record of data'>
            <td>{{record.Product}}</td>
            <td>{{record.Quantity}}</td>
          </tr>
      </tbody>
    </table>
    <br>
    <label>Enter product name:</label>
    <input type="text" [(ngModel)]="productName" />
    <label>Enter quantity:</label>
    <input type="text" [(ngModel)]="quantity"/>
    <button (click)='addItem()'>Add</button>
    <br/><br/>
  </div>

app.component.html file has only <router-outlet></router-outlet>.

How can I fix this issue?

回答1:

As per the output, your HTML need to have

<div class="content"><span>Product app is running!</span> </div>

to make it work.

来源：https://stackoverflow.com/questions/64095519/cannot-read-property-textcontent-of-null-angular-testing