TS18047 jest error: "object may be null"

I'm currently working on a test (jtest) for an angular component, but it keeps failing due to this particular error. Any thoughts on how to resolve this? :)

it("should require valid email", () => {
    spectator.component.email.setValue({ email: "invalidemail" });
    expect(spectator.component.email).toEqual(false);
});

In my .ts file:

get email(): AbstractControl | null {
    return this.form.get("email");
}

The error message I am encountering is as follows:

error stacktrace

I attempted using 

spectator.component.email("invalidemail");

angulartypescriptjestjs

Answer №1

The issue is related to the undefined value of this.form. Therefore, it needs to be initialized first:

describe("valid email validation", () => {
    spectator.component.form = new FormGroup({email: new FormControl()});
    spectator.component.email.setValue({ email: "invalidemail" });
    expect(spectator.component.email).toEqual(false);
});

Answer №2

Finally, the issue has been resolved!

it("should indicate invalid email with incorrect pattern", () => {
    spectator.detectChanges();
    spectator.component.form.get("email")?.setValue("invalidemail");
    spectator.component.form.get("email")?.updateValueAndValidity();

    expect(spectator.component.email?.invalid).toBeTruthy();
    expect(spectator.component.email?.hasError("pattern")).toBeTruthy();
    });

It's all good now, but I appreciate the assistance anyway :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Error: In TypeScript, the Child Method is not recognized within the Parent

I'm a newcomer to TypeScript and object-oriented programming. I am attempting to use a method from a child class in the parent class, but for some reason, the method is not being recognized. Below is my Child class: import {Ouvrage} from "./Clas ...

typescriptoop

What is the best way to communicate an event occurring within the ng-content to the reusable parent component in Angular?

I am looking to create a versatile dropdown component in Angular that can display different content such as a list or a tree. Essentially, I want to be able to extract the selection label that triggers the dropdown to open and close upon clicking. dropdow ...

angular

How to implement a button spinner in Angular 6 without making a service call

I need to toggle the spinner visibility while downloading a PDF file. Here is the code in my Html component: <div > <ng-container *ngFor="let p of selectedStudent.photos.list; let i = index"> <div *ngIf="p.even ...

angular

Setting up Firebase in an NX Workspace

Looking for a way to set up an Nx Workspace with Firebase that can deploy multiple applications within the monorepo. Ideal file structure would resemble something like this: To deploy the various applications, hoping to pass a config argument to the fireb ...

angularfirebasedeploymentnrwl-nxnx-workspace

Verify user using Cognito user pool log-in information

Is it possible to authenticate a user using only user pool credentials without an identity pool/IdentityPoolId? Check out this link for more information: https://github.com/aws/amazon-cognito-identity-js The example provided in the link above specifically ...

javascripttypescriptauthenticationaws-sdkamazon-cognito

Invalid sequencing of Nest.js async onModuleInit causing issues

I am dealing with a scenario where ServiceA relies on RedisService. In order for ServiceA to be fully operational, it must wait for RedisService to complete its initialization process (specifically, for RedisService.onModuleInit to be called and awaited). ...

javascriptnode.jstypescriptnestjs

Encountering difficulties when trying to deploy Angular 4 with TypeScript on Heroku

I have been facing an issue while trying to deploy my angular 4 app on Heroku. The deployment fails to proceed properly even though everything works fine locally. Here are the relevant files: package.json { "name": "webcli2", "version": "0.0.0", " ...

angulartypescriptherokudeployment

Angular 2: Troubleshooting Issues with Observable Data Display

Looking to implement a RESTful call with Angular 2 that constantly updates whenever there are changes in the API. In my service, I've included an Observable to fetch data from the API: getData(): Observable<any[]> { return this.http.get(url) ...

javascriptrestangularobservable

The Mat-Datepicker will always show the current date in your local time zone, never in

Utilizing a datepicker and momentjs, I have successfully implemented sending UTC dates to my server. However, the issue arises when retrieving these UTC dates back into the date picker, as it always reflects my timezone (EST). This discrepancy can result i ...

angulardatepickermomentjs

What are the counterparts of HasValue and .Value in TypeScript?

There is a method in my code: public cancelOperation(OperationId: string): Promise<void> { // some calls } I retrieve OperationId from another function: let operationId = GetOperationId() {} which returns a nullable OperationId, operat ...

javascriptc#typescriptconditional-operatornull-check

Unable to utilize the "let" keyword in WebStorm

Currently, I am delving into learning typescript and attempting to create a simple 'let' statement. However, I encountered an error indicating the need to use ECMAScript 6 or later versions. The exact message from the typescript compiler states: ...

javascripttypescriptwebstorm

Inheriting Angular components: How can the life cycle hooks of a parent component be triggered?

So I'm working with BaseComponent and a number of child components that extend it: export class Child1Component extends BaseComponent implements OnInit, AfterViewInit In the case of Child1Component, there is no explicit call to super.ngAfterViewInit ...

angulartypescriptprototypal-inheritance

Tips for implementing a reusable instance of a class in (SSR) React (comparable to a @Bean in Spring)

I am currently developing a new application using Next.js and React (Server Components) in TypeScript. In order to showcase and evaluate the app, I need to support two different data sources that provide identical data through separate APIs. My goal is to ...

reactjstypescriptnext.jsdependency-injection

Pull information from API and populate a dropdown menu in an Angular material select input

I am facing an issue with displaying data from an API in a mat select input field. I have tried to iterate over the data using a for loop but it is not working as expected. Can someone help me figure out how to properly populate the mat select input with d ...

javascriptarraysangulartypescriptangular-material

Displaying exclusively distinct values in the selection box/dropdown menu

My goal is to retrieve data from the SQL server database and populate the corresponding fields on the frontend. While I am able to fetch the data, some fields in the response contain duplicate values in the dropdown menu. Here is an example of how my Compo ...

javascriptangulartypescriptangular7

What is the best way to test a React component that includes a Router, Redux, and two Higher Order Components using Jest and Enzyme?

I'm currently facing a challenge with this issue. I have a React Component that is linked to React Router 4 and Redux store, and it's wrapped by two HOCs. It may sound complicated, but that's how it was implemented. Here's the export st ...

javascriptreactjsreduxjestjsenzyme

Utilize VueJS to upload and visualize a file input on your website

I am currently working with TypeScript and Haml in conjunction with vue.js. My goal is to enable users to upload and view a file seamlessly using the vue.js framework. I have successfully managed to upload an image, however, I am facing an issue where the ...

javascripttypescripthamlvue.js

There was an issue locating the moment/ts3.1-typings/moment module

Encountering an ERROR after updating Angular version: Could not resolve moment/ts3.1-typings/moment in node_modules/ngx-daterangepicker-material/ngx-daterangepicker-material.d.ts ...

javascriptangulartypescript

Ionic 2 - Dynamically Loading Segments

I am dealing with categories and dishes. Each dish is associated with a specific category. My goal is to send an http request to retrieve all the dishes belonging to a particular category. This will result in an array like: { Soup[{'Name',&ap ...

angulartypescriptangularjs-directiveionic2

What could be causing my website to lose its responsiveness after linking a domain?

Recently, I created a basic website for an event in my town using AWS Amplify from Amazon. Initially, the website was hosted without a custom domain and had a random URL. It worked well on both web and mobile platforms. However, after connecting a custom d ...

htmlangulardnsaws-amplify