`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.provide(FAQ_SERVICE, new FAQService());

// FAQIndex.vue - component using the injected service
…
setup() {
  return {
    faqService: inject(FAQ_SERVICE) as FAQService,
  };
}
…

My next step is to test this component using jest and mock the service. I am aware that when providing objects using plain Strings, mocking can be done using this method:

component = mount(FAQIndex, {
  global:
{
    provide: {
      'FAQ_SERVICE': { /* mock object */ },
    },
  },
});

However, I am uncertain of how to approach this when the service is injected via Symbols like in the example provided above.

Answer №1

Be sure to import the FAQ_SERVICE in your test file just like it is imported in your application:

import { FAQ_SERVICE } from './symbols'

it('performs a certain action', () => {
  const component = mount(FAQIndex, {
    global: {
      provide: {
        [FAQ_SERVICE as symbol]: { /* mock object */ }
      }
    }
  })
})

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

What is the best way to send a string parameter from an Angular UI to a Node.js backend?

My goal is to transfer a string value from an Angular UI to a Node.js backend API, which will then search in MongoDB using the provided string value as shown below. I am attempting to receive input in enteredValue and pass it on to the http.get call as pa ...

Preventing Button Clicks in Angular 2 When Form Data is Modified

I am looking to determine if at least one field in my form has been altered. When this condition is met, the disableButton variable will be set to true, and false if there are no changes in the form. Here is the snippet of code I am currently using: // Th ...

The behavior of TypeScript class inheritance differs from that of its ES6 equivalent

I'm currently developing a custom error handling middleware for my node.js project using express and TypeScript. One key component of this middleware is the AppError class, which extends the built-in Error class. The code for this class is as follows: ...

Error encountered when attempting to create a new Vue project using Vue CLI (npm issue)

I'm having trouble creating a new Vue CLI project. It was working fine before, but now it's not working... Vue CLI v4.2.3 ✨ Creating project in /Web develop/Vue Projects/new. ...

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

Using a single TypeORM connection across various modules in NestJS

In the process of developing a link shortener, I have set up a CRUD REST API for authentication and creating shortened links. Now, I am looking to manage redirects for these shortened URLs without using the same path as my API endpoints (e.g. /api/v1/). Af ...

Is there a way to locate a prior version of the NPM @types package?

Currently, I am utilizing Angular version 1.4.7 and in need of a type file corresponding to this specific version. Browsing through the NPM website, I came across a type file for AngularJs listed as version 1.5.14 alpha. Is there a way to access a compreh ...

What could be causing my CSS code to not function properly within Vue.js?

Having trouble with css in VueJs. I can't seem to figure out what I'm doing wrong. Generally, my scoped style css works fine in vuejs, I can target ids and classes without any issues. The problem arises when trying to change the internal css va ...

Using Angular to bind the ngModel to a variable's object property

In my application, I am working with a user object that looks like this: let user = {name: "John", dob:"1995-10-15", metadata: {}} The metadata property of the user object is initially empty. I want to add a new property to the metadata object based on u ...

The animation functionality for Ionic Vue Router on iOS seems to be malfunctioning

I have recently set up a new Ionic Vue app using the tabs template and encountered an issue after switching the mode to ios - the routing animations disappeared. The animations work fine with md. This is what my index.html looks like: <!DOCTYPE html> ...

Making an input field in Vue automatically read-only when a specific value is met

Is it possible to make an input field read-only in Vue.js based on data values? Here's a situation: <select class="form-control" id="selectCategory" :readonly="cat_id >= 1" name="cat_id"> I'm looking for a wa ...

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

Inactive function

I have a function that inserts my articles and I call this function on my page. There are no errors, but the next function retrieveAllArticles() is not being executed. public saveAllArticles(article) { for(let data in article) { this.db.exec ...

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

iterating through the checked values in Angular 4

I need assistance in writing a loop using TypeScript to send each checked employee as a parameter to the postCouncilAbsence function. Can anyone help? component.ts: onattendanceSave(form:NgForm){ this.index = this.attendanceForm.value console.log ...

A helpful guide on fetching the Response object within a NestJS GraphQL resolver

Is there a way to pass @Res() into my graphql resolvers and make it work correctly? I tried the following, but it didn't work as expected: @Mutation(() => String) login(@Args('loginInput') loginInput: LoginInput, @Res() res: Response) ...

Transforming text colors dynamically using Vue.js

Here is an Angular code snippet: <div [style.color]="'#' + prod.id.substring(0,6)"> <small>{{ prod.id }}</small> </div> Now I want to create a similar code using vue.js. ...

Can you specify a data type for ngFor in Angular?

I am currently employing ngFor to iterate over a collection of a specific type [Menu] within Angular 4.x. During this process, I am looping through a collection property of the menu object (menu.items). Unfortunately, my IDE (Eclipse + Angular IDE) is un ...

Removing a field from a collection using firebase-admin: Tips and tricks

I currently have a collection stored in Firebase Realtime Database structured like this: My requirement is to remove the first element (the one ending with Wt6J) from the database using firebase-admin. Below is the code snippet I tried, but it didn' ...

Disseminate several outcomes using a Discord bot

My first experience using stackoverflow was to seek help regarding a bot created to post results whenever a new episode of a show in the search list is added on nyaa.si. The issue I'm facing is that the bot posts the same episode multiple times within ...