Composition API first Class support

[Xenoha]

Hello Team,

This has been a great suite through the evolution of Vue, However, I feel like with this being a RC, there seems to be a lot of working around happening for simple Vue3 components. The documentation doesn't offer much for testing when using the compositions API and with the release of the setup SFC from the vue team this utils seems even further behind.

I'm not trying to be a bad news bear but I am dealing with a lot of issues which I would think should be first class with a test utils. At the very least, can the docs be updated to show composition api examples for each case?

1. When using the globals.provide with the mount method, the values can be brought into a component as proxies or variable depending on how the user provides them in the parent. This isn't handled well inside the current mount method and when accessing an injected variable with the myVariable.value the test utils seems to no longer track correctly.

2. The same occurs when bringing in props. Props are usually defined now through defineProps, and the user has the change to destructure with toRefs or use the prop itself. As soon as the user uses the property with toRefs the user is dealing with a proxy that the suite just doesn't handle.

The below highlights a simple example: (Just to highlight my thoughts above )
We have a simple component that renders the provided prop title. Then based on title and the injected type we grab some kind of data and set the ref data with the new data array.

<template>
  <div>
    {{ title }}
  </div>
  <div v-if="data.length" id="data">
    Has Data
  </div>
</template>

<script setup>
import { toRefs, ref, inject } from "vue";

const props = defineProps({
	title: { required: true, type: String },
});

const { title } = toRefs(props);

const type = inject("parentType"); // proxy`

const data = ref([]);

function getData() {
	 // get data based on the title and type.value then set it to data.value.
	 // data.value = newData
}

getData();
</script>

I would love your assistance here, but I don't see a way to test the template for the div#data element? I don't have a first class way to: expect(wrapper.find('#data').exists()).toBe(true).

To start I think I would have to:

const mockGetData = jest.fn()
global.provide = { parentType: 'something' }

Then type.value wouldn't exist because the utils doesn't handle this case, correct? Moreover, checking title.value in the setup won't have a value because I would provide props of title: 'Some Title'.

Using the composition API, how do I toggle the ref data? How do I both check the template text and do some calculation of the provided prop title? How do I toggle and add data to data.value?

Again, I have loved your tools and love what you did with the global.provide, teleport, and emitted() implementations. I just feel it's time we see first class support for the Composition API with clear documentation in a release candidate for Vue3.

As Always, assistance is always accepted.

[cexbrayat]

Hi @Xenoha

Thank you for opening an issue

To makes things clearer, I think the Composition API is well supported (a lot of us are using it day to day), but maybe we can improve script setup support which is fairly new (out of experimental state since Vue 3.2).

Your issue is a bit long so maybe I'm missing key points in there, but let me try to give you some help:

• to provide a value, you can use mount(Component, global: { provide: { parentType: 'something' }).
• you can provide props with mount(Component, props: { title: 'Some title'}), and it works as expected
• script setup has a difference compared to Composition API, as the component is closed by default. If you want to modify data out of the component, you have to expose it (see the script setup RFC). But in your case, I would probably just rely on jest to do so (that's what I teach in my Vue ebook/training). With Jest you can provide the value you want for data and then check the template for its existence.

I hope this helps. If you have other questions, I think the best way would be to open a dedicated issue, with your component and a test example that fails to do what you want. We are very much looking for feedback, and we can probably improve a lot around script setup support, but we do need tangible code to understand the issue 😉

[Xenoha]

@cexbrayat Thank you for your response.

Unfortunately, my code is not open source, or I would share it. I will spend sometime making clones that highlight the issues to better assist. Though, my code above highlights a few points specifically.

1. mount(Component, global: { provide: { title: 'mainTitle' } }) mocks the template perfectly. However, it is destructured by using toRefs and it's value when using <script setup> or the old SFC will be by using title.value. So in the getData method the utils will provide the property title but not the property title.value. Will defineExpose allow this to function properly or is this not yet implemented?
2. Just like you have provide setData setProps setValue, How would I set the value of data dynamically?
3. I would suggest clear examples using the options and composition API's within the docs.

[cexbrayat]

👍 We don't need your complete code: in fact it would be too hard to debug. Just open small issues with a component and a failing test in a github repo and we'll give you a hand.

1. I'm missing the point of what is not working here. A repro would help (I'm currently on vacation, so maybe my brain is a bit slow 😅)
2. If data is exposed with defineExpose, then you can use wrapper.vm.data = 'something' in your test.
3. Sure, you can open issues on specific examples you would want, or even PRs if you feel like it. We would be very happy to have help on this front!

[maelga]

@Xenoha

Lachlan Miller (@lmiller1990), one of the maintainer of Vue Test Utils, has published a very useful handbook for testing Vue 3 with Jest. His YouTube series is also excellent:

• https://lmiller1990.github.io/vue-testing-handbook/v3/
• https://www.youtube.com/watch?v=0lV4dVYOyBw&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA

I personally find more answers there than in the official documentation.

[cexbrayat]

Lachlan's material is top notch 👍 If I may, I can also point to my ebook and online training if you're looking for test examples (a few hundreds provided in the online training, testing pretty much every aspect of an application).

[Xenoha]

As a start, the below fails and only renders the v-else div. Without going back to all my .vue components to add defineExpose methods just for testing purposes, how would I use jest to see the correct template behavior?

<template>
  <div v-if=hasContent>
    <div id="contentInfo"
    </div>
  </div>
  <div v-else>
    <div id="noContent">
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect, inject } from 'vue'

const type = inject('someType')
const hasContent = ref(false)

watchEffect(() => {
  if (type === 'content') hasContent.value = true;
});

<script>

describe('layout', () => {
  it('renders content layout',  () => {
    const wrapper = mount(Layout, global: { provide: { someType: 'content' } })
    expect(wrapper.find('#contentInfo').exists()).toBe(true) 
  })
})

[cexbrayat]

This looks like an issue then, because at first sight, that seems correct.

Out of curiosity: if you try using "classic" Composition API, does it work? I have several tests doing the same thing without script setup and it should work fine.

If you want to go one step further, you can open a PR with a failing test (see this test for example that we have for inject/provide https://github.com/vuejs/vue-test-utils-next/blob/master/tests/mountingOptions/global.provides.spec.ts), and we'll take a look.

[lmiller1990]

I am fairly sure the problem is we do not have great support for <script setup>. The RFC changed multiple times, so we just decided to wait until it was standardized before supporting it.

Now it's standardized, we can probably start to aggressively fix related bugs and support it. Considering it was experimental until a few weeks ago, I don't think the lack of support was unreasonable, but we should definitely make sure all the existing tests work with <script setup> as expected.

[lmiller1990]

@Xenoha I tried the example in your first post (just copy pasted it into this code base) and it works as expected:

cd223f9

Also just tried the second one with watchEffect: it also works fine for me: 8d2f87a

Are you able to share a repository with either of those examples failing? My guess is either:

1. incorrect version of some dependency (very possible; Vue 3 is new and moving fast, so are it's dependencies)
2. some kind of configuration error
3. other unrelated problem

Either way we definitely need more coverage for <script setup>, but I don't see an obvious bug, at least in my personal usage, or in this thread.

@maelga thanks for the praise! Ironically I wrote both the testing handbook and the vast majority of the official documentation. I hope we can make the official docs more useful. Any ideas how we can improve the official docs?

[lmiller1990]

This code will not run as is - there are many missing parts, x-input, @/components/layouts/StandardDialogLayout.vue, etc. It will take me quite some time to get this running locally.

It would be really useful if you could post a repository I could clone and run. I don't think you need to include the entire component - just a minimal example.

If you can do that, I'd be happy to either verify there is a bug and fix it (which is generally pretty quick, since I know both the Vue and Test Utils internals really well) or help identify the problem in your code and send you a PR showing you how to fix it.

[Xenoha]

@lmiller1990 I'll spend sometime in the near future to get you a suite to assist. I'll need to breakdown my issues and it will take some time. Bare with me.

I deleted the above code just to be safe.

[lmiller1990]

No problem.

I don't see any immediately actionable issue here, so I will close this. Please make a new issue with your reproduction when you have it ready.

[cexbrayat]

@lmiller1990 Thanks for taking the time to look into it!

But you pushed these commits on master and they broke the build: I suspect this was not intended? Can you revert and open a PR so this can be properly reviewed (there is also an allowJs option added to the TS config that should be removed). Thanks!