Jasmine raised an issue stating that Jodit is not recognized during the unit testing process

I'm currently testing a custom Jodit editor in my app, but even the automatic 'should create' test is failing with an error message of 'Jodit is not defined'.

jodit.component.ts

import { Component, OnInit, AfterViewInit, OnDestroy, Input, Output, } from '@angular/core';

declare var Jodit: any;

@Component({
  selector: 'app-jodit',
  templateUrl: './jodit.component.html',
  styleUrls: ['./jodit.component.css']
})

export class JoditComponent implements AfterViewInit, OnDestroy {

  @Input() ... ;
  @Output() ... ;

  ngAfterViewInit() {
    this.editor = new Jodit('#' + this.elementId, ...
      });

jodit.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { JoditComponent } from './jodit.component';

describe('JoditComponent', () => {

  let fixture: ComponentFixture<JoditComponent>;
  let component: JoditComponent;


  beforeEach(() => {

    TestBed.configureTestingModule({
      declarations: [ JoditComponent ]
    })

    fixture = TestBed.createComponent(JoditComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

  it('should create', () => {
    expect(component).toBeTruthy();
  }); 
});

I am fairly new to Angular and testing in general, so I am wondering if I have incorrectly declared the Jodit variable or if I have missed something in the imports. Any help would be greatly appreciated.

Answer №1

Ensure that in your testing .spec.ts file, you include the necessary import statements for Jodit and bundle it just as you did in your jodit.component.ts file. It's possible that the imports array of TestBed.configureTestingModule also requires these imports.

For further information, you can refer to this link: Add a typescript library to angular

Make sure to include the necessary imports in your tests as well.

If you prefer, you can also use the Angular wrapper for Jodit: https://github.com/jodit/jodit-angular

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

Issue encountered while installing npm dependencies: JSON input terminated unexpectedly in the vicinity of '...ories":{},"dist":{"in'

Encountering an issue with running npm install. The debug.log is showing the following logs: 2644 silly saveTree +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55223037333a3b21393a3431302715647b637b">[email protect ...

Develop a TypeScript class that includes only a single calculated attribute

Is it advisable to create a class solely for one computed property as a key in order to manage the JSON response? I am faced with an issue where I need to create a blog post. There are 3 variations to choose from: A) Blog Post EN B) Blog Post GER C) Bl ...

Python data type unit test results in failure due to unexpected values: Expected 'NaT' but instead received 'NaN'

Currently, I am initiating unit-testing for my python data pipeline by utilizing the unittest module. An example of a Data class object: class IsAvailable(Object) employee_id: int = Property() start_time: str = Property() Here is a sample unit t ...

Continuously refreshing the information displayed in the Angular view that is linked to a function in the TypeScript file whenever a modification is identified

I am currently working on an ecommerce application using the MEAN stack. In order to make the app real-time, I have integrated pusher-js. To show the quantity of a specific item in the shopping cart, I have implemented a function in the ts file that loops ...

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Currently, as part of my transition to typescript, I am working on incorporating a conditional operator into the table component provided by Ant Design. const paginationLogic = props.data.length <= 10 ? false : true return ( <> ...

Encountering a compiler error due to lack of patience for a promise?

In the current TypeScript environment, I am able to write code like this: async function getSomething():Promise<Something> { // ... } And later in my code: const myObject = getSomething(); However, when I attempt to use myObject at a later po ...

Ensure that the slide numbers are not displayed at the top of the Angular Bootstrap Carousel when using ng carousal

I am currently implementing the Angular Bootstrap Carousel for image slides on my website's homepage, but I am facing an issue where it always displays the text: "Slide 1 of 4". https://i.sstatic.net/atbDZ.png Despite trying multiple solutions, I ha ...

Error: the function t.rgb is not defined

An error occurred: "Uncaught TypeError: t.rgb is not a function" After creating an Angular application, building it, and trying to serve it, I encountered the following issue: $ ng serve --prod --aot The error message displayed in the console is as foll ...

Is it possible to simulate a brand new instance?

I have legacy code that wasn't built with TDD in mind. Now I want to write a test for a function that has the following structure: function somefunction($someargs){ // do a few checks on $someargs $database = new DB_PG(); $result = $datab ...

What are the steps to locally test my custom UI library package built with tsdx in a React.js project

I am currently utilizing tsdx to develop a React UI library, and I am looking to test it within my Next.js project before officially publishing it to the npm package. Initially, I attempted using npm link, which worked initially. However, when I made ch ...

Encountered an error while trying to access a property that is undefined - attempting to call

In my TypeScript class, I have a method that retrieves a list of organizations and their roles. The method looks like this: getOrgList(oo: fhir.Organization) { var olist: orgRoles[] = []; var filtered = oo.extension.filter(this.getRoleExt); f ...

What is the trick to accessing an object's key and value when you are unsure of the object's

Currently, I am in the process of constructing a React component that is designed to receive an array of objects. However, I have encountered a question: Is there a way for me to retrieve both the key and value of an object within the map function without ...

Updating the main window in Angular after the closure of a popup window

Is it possible in Angular typescript to detect the close event of a popup window and then refresh the parent window? I attempted to achieve this by including the following script in the component that will be loaded onto the popup window, but unfortunatel ...

Ways to add parameters to each external URL using Angular

Seeking thoughts on implementing a feature in Angular to append a parameter to all external URLs or URLs from a specific domain. Let's take as an example. If I were using jQuery, I could achieve this on document ready by doing something like: $(‘ ...

Angular: Custom Pipes Now Adding Currency Symbol to Model Values

I have encountered an issue involving two currency pipe examples. One example involves using the pipe directly in the view, while the other utilizes the pipe from the TypeScript code side. However, when attempting to submit form data, the value related to ...

An error has occurred in angular flex-layout: There is no exported member named ɵNgClassImpl

During my most recent Mean stack project, I utilized angular flex layout and everything ran smoothly. However, when I began a new project with angular 7 and included flex layout 8(beta), I encountered the following error: ERROR in node_modules/ ...

Struggling to get Tailwind typography to play nice with a multi-column React application shell

I'm currently working on a React application with TypeScript and trying to integrate one of Tailwind's multi-column application shells (this specific one). I want to render some HTML content using Tailwind Typography by utilizing the prose class. ...

Guide to crafting a reply using nestjs exception filters with nestfastify

I'm facing a challenge with writing custom HTTP responses from NestJS exception filters. Currently, I am using the Nest Fastify framework instead of Express. I have created custom exception filters to handle UserNotFoundException in the following mann ...

Issue connecting database with error when combining TypeORM with Next.js

I am attempting to use TypeORM with the next.js framework. Here is my connection setup: const create = () => { // @ts-ignore return createConnection({ ...config }); }; export const getDatabaseConnection = async () => { conso ...

`It is important to note that in Tailwind CSS, `h-8` does not supersede `h-4

I developed an Icon component that looks like this: import { IconProp, library } from "@fortawesome/fontawesome-svg-core"; import { far } from "@fortawesome/free-regular-svg-icons"; import { fas } from "@fortawesome/free-solid-svg- ...