Leverage dependency injection with vue / vitest to enhance modularity and

Question

Leverage dependency injection with vue / vitest to enhance modularity and

My Software Configuration

Developing a Vue 3 application
Utilizing Pinia stores
Initiating a plugin in my main.ts by using app.use(myPlugin)
Creating and providing a repository (MyRepo) in MyPlugin.ts based on specific environment conditions. This repository can interact with an API or provide dummy data for development and testing purposes.
In myStore.ts :

defineStore('myStore', () => {
  const repo = inject<MyRepoInterface>('myRepo');
  // ....
})

Current Issue

Encountering an error while writing tests that rely on a store which in turn depends on myStore. When the inject function is invoked in my test, a warning message appears:

[Vue warn]: inject() can only be used within setup() or functional components.

Additionally, the repo remains undefined, leading to errors.

Seeking Solution

On the lookout for a method to provide the repository during the setup of my testing framework (Vitest). By doing so, I aim to inject it into my code during regular application runtime as well as during test execution. Any suggestions on how I can accomplish this?

Open to feedback on my approach to Dependency Injection. Thank you for your input!

typescript vue.js dependency-injection pinia vitest

Answer 1

Answer №1

Pinia stores are instantiated as singletons upon the first call to the store function. The usage of inject within the Pinia store setup function requires the initial use to be within Vue component setup or similar lifecycle hooks, although this restriction does not apply to Pinia stores in general.

Creating a store using store options instead of a function would not be feasible using this method, even though these two approaches are typically interchangeable.

A more adaptable and test-friendly approach involves using explicit dependency injection in the store method:

let repo = ref(null as unknown as MyRepoInterface);

let init = (cfg: { repo: MyRepoInterface }) => {
  repo.value = cfg.repo;
})

Within the App component:

useMyStore().init({
  repo: inject<MyRepoInterface>('myRepo')
})

Answer 2

Pinia stores are instantiated as singletons upon the first call to the store function. The usage of inject within the Pinia store setup function requires the initial use to be within Vue component setup or similar lifecycle hooks, although this restriction does not apply to Pinia stores in general.

Creating a store using store options instead of a function would not be feasible using this method, even though these two approaches are typically interchangeable.

A more adaptable and test-friendly approach involves using explicit dependency injection in the store method:

let repo = ref(null as unknown as MyRepoInterface);

let init = (cfg: { repo: MyRepoInterface }) => {
  repo.value = cfg.repo;
})

Within the App component:

useMyStore().init({
  repo: inject<MyRepoInterface>('myRepo')
})

Leverage dependency injection with vue / vitest to enhance modularity and

Answer №1

Similar questions

Creating an array in TypeScript is a versatile and powerful feature that

Piping in Angular 2 with injected dependencies

Is it possible to access the line number of a node using the TypeScript compiler API?

How to pass a single property as a prop in TypeScript when working with React

Problem with TypeScript involving parameter destructuring and null coalescing

Tips on streamlining two similar TypeScript interfaces with distinct key names

"Optimize Your Data with PrimeNG's Table Filtering Feature

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

What is the best way to create a case-insensitive sorting key in ag-grid?

Obtaining parameter types for functions from deeply nested types

Do [(ngModel)] bindings strictly adhere to being strings?

Why are all my Front-End requests being directed to the Back-End project?

Adjust the scroll position when the height of a div is modified

When calling a Vue.js method, it appears to be undefined

Potential 'undefined' object detected in Vuex mutation using TypeScript

Incorporate matTooltip dynamically into text for targeted keywords

As I attempt to log in, the GitHub API is sending back a message stating that authentication

Having difficulty replicating the sorting process in Vue.js for the second time

At what point does a prop become officially designated as having the same value as what was initially passed to the component

Mongoose encountered an error when attempting to cast the value "ObjectID" to an ObjectId at the specified path "red.s1"