NG0303: Unable to establish a connection with 'ngbTooltip' as it is not recognized as a valid property of 'button'

ERROR: 'NG0303: Can't bind to 'ngbTooltip' since it isn't a known property of 'button'.'

Encountering this issue in my Angular 12 project when running local tests, the ngbTooltip error is present in all .spec files. Despite using CUSTOM_ELEMENT_SCHEMA, I can't pinpoint where the error exactly occurs. Interestingly, the error doesn't show up with ng serve but surfaces during ng test. I've attempted adding CUSTOM_ELEMENT_SCHEMA to the application module without success. Any suggestions on how to resolve this would be highly appreciated.

Check Console output for more details Additional Console output here

javascriptangulartypescriptunit-testingkarma-jasmine

Answer №1

Consider including NgbModule in the imports array within your TestBed.configureTestingModule({.

TestBed.configureTestingModule({
  imports: [NgbModule],
...

If importing NgbModule is not desired or causes complications during unit testing, you have the option to create a mock directive and provide it instead.

@Directive({
  selector: '[ngbTooltip]'
})
class MockNgbTooltip {}
...
TestBed.configureTestingModule({
  // add the mock to the declarations array
  declarations: [MockNgbTooltip],

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

Execute JavaScript function only if it is the final invocation

I'm currently experiencing an issue with a Javascript function that updates a bootstrap spinner. The function works well in general, but the problem arises when I click multiple times. I utilize ajax to update the quantity of selected products in the ...

javascriptjqueryajaxtwitter-bootstrap

AngularJS Treeview - Rearranging tree nodes

My journey with Angular is just beginning, and I managed to create a treeview following this example: jsfiddle.net/eu81273/8LWUc/18/ The data structure I've adopted looks like this: treeview1 = [ { roleName: "User ...

javascriptjqueryangularjstreeview

Implementing a toggleable light and dark mode feature in Bootstrap 4 with a simple checkbox

Is it possible to link a checkbox's boolean value to a table's class in order to enable dark mode when checked? I attempted the following: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="styleshee ...

angularbootstrap-4

Lost Vuex struggles when it is manually navigating a route in Vue-router

Exclusively on Safari browser, I encounter an issue when manually entering the URL in the navigation bar after logging in. For example, if I type "http://x.x.x.x:8080/gestione", the browser loses the vuex store state (specifically the gest_user module with ...

javascriptvue.jsvuexvue-router

What is the best way to run a code block every time a new reaction is added in discord.js?

I need assistance with creating a bot that can count the number of specific reactions ('⚪') to a message within a specified time frame. Additionally, I want to be able to skip the remaining time by reacting to a different emoji ('X'). ...

javascriptnode.jsdiscord.js

Node.js/Express API Endpoint Ceases Functioning

In my Angular/Express.js app, there is a post method within my api.service.ts file: post(data: any, endpointUrl: string): Observable<T> { console.log("REACHED POST METHOD") return this.http.post<T>(`${this.apiUrl}/${endpoint ...

javascriptangularexpress

Troubleshooting the compatibility issue of HTML5 video tag on iOS Safari browser (iPhone)

Scenario I encountered an issue while trying to play a video in the Edge browser. The project framework consists of: .NET 6 MVC and VUE for the client side .NET 6 WebApi for the server side The Vue component on the client will send a request with ...

javascriptiosvue.jsvideobrowser

Utilize mapping function to merge arrays

Currently facing an issue with no clear solution in sight. When making API calls via a map, I am able to successfully log all results individually. However, my challenge lies in combining these results into a single array. var alpha = ['a', &apo ...

javascriptnode.jssveltesapper

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Tips on how to showcase particular keys from json information in React

Here is a sample of Json data that I have: [ { "serial_number": "test1", "added_at": "2021-02-05T18:58:43.382943Z", "ser_mod": [ { "added_at": "2021-02-06T02: ...

javascriptarraysjsonreactjs

`How to cleverly fake dependencies with symbols in Jest, Vue3, and Typescript?`

I am faced with the following scenario: // symbols.ts - Injection Key defined as a Symbol export const FAQ_SERVICE: InjectionKey<FAQService> = Symbol('FAQService'); // main.ts - globally provides a service using the injection key app.provi ...

typescriptvue.jsjestjsvuejs3vue-test-utils

What is the best way to perform an AJAX request on Hackerrank using JavaScript?

As I dove into the Hackerrank example test, I experimented with various methods for making an AJAX call. XMLHttpReq, fetch, and others were attempted but none seemed to work; both XHR and fetch methods were unavailable. My first attempt was with fetch: as ...

javascriptnode.jsxmlhttprequest

Browse through the options in the dropdown list -Angular 6

I am looking to implement a filtering feature in my Angular app where data can be filtered based on the selected product number from a dropdown menu. The product data is structured in JSON format as shown below. component.ts productlistArray = [{ num ...

javascripthtmljsonangular

What is the reason behind external JavaScript files being able to access the functions of other external JavaScript files, and what measures can

While I may not be an expert in JavaScript, I find it intriguing that within a project containing 3 JavaScript files, any of these files can access functions from the others. The real puzzle lies in figuring out how to prevent this from happening. For in ...

javascript

How can I replace any non-alphanumeric characters in a string with an underscore using JavaScript or TypeScript?

There is a unique string generated from an external data source that I cannot manage. The system above me necessitates the IDs to adhere to this rule: "Field names should start with a letter and can solely consist of letters, numbers, or underscores (&apos ...

javascriptregextypescriptlodash

Issue: Unable to locate the "es2015" preset in relation to the given directory

I encountered an issue while attempting to use babel. Error: Couldn't find preset "es2015" relative to directory webpack.config.js module.exports = { entry: './main.js', ourput: { path:'./', filename:&a ...

javascriptnode.jsreactjswebpack

Variable type linked to interface content type

Is it possible to link two fields of an interface together? I have the following interface: export interface IContractKpi { type: 'shipmentVolumes' | 'transitTime' | 'invoices'; visible: boolean; content: IKpiContent; } ...

typescriptvue.jsdynamic

Utilize Firebase Hosting to Host Your Vue Application

Having some trouble with hosting code on Firebase. Instead of displaying the value, {{Item.name}} is appearing :( Same code works fine on Codepen. Wondering if Firebase accepts vue.min.js? When deployed, the site is showing {{var}} instead of the table va ...

javascripthtmlfirebasevue.jsgoogle-sheets

JQuery ajax DELETE request encounters issues during the OPTIONS stage

I'm encountering an issue while trying to send a delete request using JQuery as it consistently results in a 500 internal server error. Here's the code snippet I'm using for the request: $('#deleteReview').click(function(event, ui ...

javascriptjqueryajax

What are the steps to modify the authorization header of an HTTP GET request sent from a hyperlink <a href> element?

I have a unique Angular application that securely saves JWT tokens in localstorage for authentication purposes. Now, I am eager to explore how to extract this JWT token and embed it into an HTTP GET request that opens up as a fresh web page instead of disp ...

javascriptangularjsexpress