Feature request: Test correctness of provided values

[MelvinFrohike]

Is your feature request related to a problem? Please describe. I have a component that provides a value. I want to test that the correct value is provided. I have found many examples on how to test injection of values but nothing for providing values leading me to believe that it is not possible yet.

Describe the solution you'd like I'd like to do something like this:

  const injectedValue = wrapper.vm.inject('someInjectionKey')
  expect(injectedValue).toEqual('someInjectedValue')

Describe alternatives you've considered I don't know if this should work as wrapper.vm.inject() or wrapper.inject().

Additional context This should also support symbol keys.

<script setup lang="ts">

  provide('someInjectionKey', 'someInjectionValue') // This is what I want to test 

</script>

[cexbrayat]

Hi @MelvinFrohike

If I understand correctly what you mean, you are looking at how to provide values in a test for a component that inject a value.

const greeting = inject<string>(GreetingSymbol)

That's what globals.provide is for in mount:

    const wrapper = mount(Component, {
      global: {
        provide: {
          [GreetingSymbol]: 'Provided value'
        }
      }
    })

Then your component can inject the value, and your test can check the injected valaue via the template, or wrapper.vm.greeting

[MelvinFrohike]

Thanks for the response, but this is not what I am looking for. I do not want to test that a component can inject values correctly. I want to test that a component provides the correct values.

[cexbrayat]

Thanks for the clarification.

I suppose that this component provides this value to children components, so what I usually do is mount the component with a test component as child, that simply injects the value and allows to check it in the test.

If that does not help, try to build a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts , and we'll be able to take a look

[MelvinFrohike]

Can you provide me with some pointers? I have no idea on how to mount a child component within the tests, especially as I would need to define this component in the test, since none of my component's actual direct children inject the provided values. So, how can I define a dummy component within a test and then test its injected values?

[cexbrayat]

Here you go https://stackblitz.com/edit/github-xuuwbd?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

[MelvinFrohike]

Thanks a lot. This worked for me, albeit with a lot of difficulty as my component doesn't have slots but uses dynamic components which can only be replaced with my injection-test-component under some circumstances. I still think that a feature where you can ask the wrapper what values are provided for a given key would be very useful.

[cexbrayat]

Awesome, happy to hear that. I don't think it's worth adding another API to VTU to test that, so I'll close. But if it gets some 👍 , we'll be happy to reconsider!