[Docs] Test usage of provide

[anbraten]

It took me quite some time to get an example of how to test a provide of a component. I want to test if the component uses the provide function correctly and if it does some stuff with the injected data from possible child components. Which is somehow the opposite of the existing option which is already in-build to vue-test-utils:

mount(ChildComponent, {
  global: {  
    provide: { 
      title: 'My title'
    }
  }
})

I finally got it working with the following code. Maybe this helps others and can eventually be added to the docs.

I had some interesting errors on my way:

• adding a name to the childComponent breaks it
• leaving the h(childComponent) away breaks the slot (inside child: getCurrentInstance().parent is null)

Sample

<template>
  <div class="parent">
    <p class="title">{{ title }}</p>
    <slot />
  </div>
</template>

 <script lang="ts">
import {defineComponent} from 'vue';

export defineComponent({
    setup() {
      const title = ref('Parent');
      provide('title', title);
      return { title };
    },
});
</script>

import { mount } from '@vue/test-utils';
import { h, inject, nextTick, provide, Ref, ref } from 'vue';
import parentComponent from './parentComponent';

describe('Repro', () => {
  it('should update injected title', async () => {
    expect.assertions(1);
    // given

    // the child component works like a mock to simulate missing inject option 
    const childComponent = {
      template: '<div />',

      setup() {
        const title = inject<Ref<string>>('title');
        if (title) {
          title.value = 'Child';
        }
        return {};
      },
    };

    // when
    const wrapper = mount(parentComponent, {
      slots: {
        default: h(childComponent),
      },
    });
    await nextTick();

    // then
    expect(wrapper.find('.title').text()).toStrictEqual(`Child`);
  });
});

[lmiller1990]

Hi!

Should should be able to use the global mounting option. Docs. Eg:

mount(ChildComponent, {
  global: {  
    provide: { 
      title: 'My title'
    }
  }
})

That would save you a lot of the boilerplate.

Do you still think the docs should be updated, or does this solve your problem?

[anbraten]

@lmiller1990 Sorry wasn't clear from my sample / text. I wanted some option to test the opposite site. So if some component is providing some stuff. I updated the sample maybe it is now a bit clearer.

[lmiller1990]

The example looks like fairly standard use of provide and slots, which I think are both documented. What do you think we need to add to the docs? We could add some notes/short examples in either the provide or slots mounting option docs, I suppose.

[freakzlike]

I came across the same situation:

<script setup lang="ts">
import { provide } from 'vue'

provide('my-key', 'provided-value')
</script>

How do I test if my component does provide correctly?

So I digged a bit into the data and found wrapper.vm.$.provides

const wrapper = mount(MyComponent)
expect(wrapper.vm.$.provides['my-key']).toBe('provided-value')

This could be mapped into a method of the wrapper to have a usage like this:

const wrapper = mount(MyComponent)
expect(wrapper.provides('my-key')).toBe('provided-value')

Unfortunately the type of provides in ComponentInternalInstance is not exposed from @vue/runtime-code and therefore likely to break and not usable for this library.

export interface ComponentInternalInstance {
  //...

  /**
   * Object containing values this component provides for its descendents
   * @internal
   */
  provides: Data
}

https://github.com/vuejs/vue-next/blob/92f11d6740929f5b591740e30ae5fba50940ec82/packages/runtime-core/src/component.ts#L246-L250

[lmiller1990]

An alternative would be to test if a child component can access the provided value via inject. Wouldn't this be a better way to test it?

[freakzlike]

Sure it is better to test with a child component, than to access some protected data.
But IMO it would be much easier, if the provides from @vue/runtime-core would be exposed and integrated into the VueWrapper in VTU.

[lmiller1990]

Unfortunately the type of provides in ComponentInternalInstance is not exposed from @vue/runtime-code and therefore likely to break and not usable for this library.

It seems like, unless this changes, we won't be able to implement this, based on my understanding and the info here.

You could try and make an issue in core, if you think this is important, but I'm not sure changing an intentionally private type for this purpose is a compelling enough reason for Evan to expose this type in core.

Could we add some more documentation around this use case, perhaps?