Can't the defineexpose event be tested ?

[yangliguo7]

I use vue-composition-api in my program
like
setup(){ const fn = ()=>{} defineExpose({ fn }); }
Can't I test this function in my test file?

I check wrapper.vm，its not on vm。

So is there a way to test this function?

[lmiller1990]

Are you using Vue 2 or Vue 3?

[yangliguo7]

Thank you for your reply. I have solved this problem. In fact, VM has exposed methods and properties, although I didn't see them in the console

I'm sorry for the delay

[MahsaGoudarzi]

Thank you for your reply. I have solved this problem. In fact, VM has exposed methods and properties, although I didn't see them in the console

I'm sorry for the delay

@yangliguo7 Hello, May I know how did you solve the issue? cause I'm struggling with same issue

[lmiller1990]

In general, I'd recommend testing from by interacting with the template - buttons, that kind of thing - as opposed to directly calling methods on vm.

If you can share an example of what you want to do @MahsaGoudarzi, I can give you some suggestions.

[yangliguo7]

Thank you for your reply. I have solved this problem. In fact, VM has exposed methods and properties, although I didn't see them in the console
I'm sorry for the delay

@yangliguo7 Hello, May I know how did you solve the issue? cause I'm struggling with same issue

Thank you for your reply. I have solved this problem. In fact, VM has exposed methods and properties, although I didn't see them in the console
I'm sorry for the delay

@yangliguo7 Hello, May I know how did you solve the issue? cause I'm struggling with same issue

It depends on how you use defineexpose

If your template has a call to your function. like

<template>
<button  @click=test />
</template>

<script setup>
function test(){
 }

defineExpose({
function 
})
</script>

just trigger the click event

or

If your template doesn't have a call to your function。just expose a function . like

<template>
 // The template does not use the event
</template>

<script setup>
function test(){
 }

defineExpose({
function 
})
</script>

I use the vm to trigger the event . This is my solution, there may be a better way

u can ask @lmiller1990 for help

@MahsaGoudarzi

[MahsaGoudarzi]

@lmiller1990 @yangliguo7 Hey, thank you so much, actually using defineExpose() solved my issue, but now I have another confusion, I have a ref variable like let showMe = ref(false) and I defined it into defineExpose({test}) as well,
when I changed value of this ref variable in my test file the expected changed on html doesn't happen. for example this is my vue component: <template><span v-if="showMe">show me </span></template> <script setup> let showMe = ref(false)</script> and in my test file when I changed it by wrapper.vm.showMe.value = true expect(wrapper.find("span").exists()).toBe(true) it returns falsy value .. Do you have any idea why it doesn't affect on my template?

[yangliguo7]

maybe use flushPromises to solve this problem. dom update is async

App.vue

<template>
  <span v-if="showMe">show me </span>
</template>
<script setup>
import { ref } from 'vue';

const showMe = ref(false);
</script>

test.spec.js

import Test from '@/App.vue';
import { mount ,flushPromises} from '@vue/test-utils';

describe('test App.vue', () => {
  test('change showMe should show span', async () => {
    const wrapper = await mount(Test);

    expect(wrapper.find("span").exists()).toBe(false)

    wrapper.vm.showMe = true;

    await flushPromises()  // this way

    expect(wrapper.find("span").exists()).toBe(true)
  });
});

is this what you expected ?

and as lmiller1990 said

u shouldn't change the value by vm

data changes should be driven by events

@MahsaGoudarzi

[lmiller1990]

Avoid using vm where you can - drive you test using trigger, etc. This is how a user will interact and how Vue expects things to be modified.

If you can share a minimal reproduction I can clone and run, I can make suggestions. I do not have time to try and reproduce your issue on my own. Thanks!

[itchwoot]

Hi, I have the same issue. I can't use trigger because there is no UI element inside the component itself that would trigger the exposed method (the whole reason it's exposed is because a potential parent component would call it), and I want to test the component on its own, which includes the exposed method.

my-component.vue

<script setup>
import { ref } from 'vue';
const secretInternalValue = ref(false);

defineExpose({
    changeSecret: () => { 
        secretInternalValue.value = true; 
    },
});
</script>

<template>
    <div>
        exposed method has been triggered: {{ secretInternalValue }}
    </div>
</template>

my-component.spec.js

import MyComponent from './my-component.vue';

describe('MyComponent', () => {
    it('changes secretInternalValue when changeSecret() is called', () => {
        wrapper = mount(MyComponent);
        wrapper.vm.changeSecret(); // doesn't work
        expect(wrapper.text()).toContain('exposed method has been triggered: true');
    });
});

[lmiller1990]

Hi!

the whole reason it's exposed is because a potential parent component would call it

Not a direct solution to your issue, but can you explain more about why you are doing this? It seems like an antipattern in general for a parent to be able to "reach" inside a child and call a method.

Another way you might be able to test it is building the same scenario you are describing: a parent calling the method. Can you just do mount on the parent component, then interact with that however your user would to trigger the function?

Some more information about your scenario would be useful.

[itchwoot]

Not a direct solution to your issue, but can you explain more about why you are doing this? It seems like an antipattern in general for a parent to be able to "reach" inside a child and call a method.

It's certainly not the ideal way of doing things, but sometimes it's necessary. Otherwise I don't see a reason for defineExpose to exist at all...?

In my case it's an image component that creates a srcset from a single image, and it has lazy loading functionality that can get triggered by the parent. The component itself does not know the context of when it should start loading the images, and it has to be an irreversible state change, that's why it's a method and not a prop.

Another way you might be able to test it is building the same scenario you are describing: a parent calling the method. Can you just do mount on the parent component, then interact with that however your user would to trigger the function?

The parent component is not in the same repository, and it seems a bit silly to create one just for the test, also feels contrary to the idea of a unit test where every unit/element is tested on its own. That would be more of an integration test or browser test then. Exposing methods to the parent so that they can be called from outside is a feature built into Vue, so I expected the Vue test utils to let me test it directly.

[Charlie-Brownie85]

@itchwoot did you arrive to any valid solution to successfully test this? I'm facing exactly the same scenario and I would like to stick with vue-testing-library as my testing library, even though some times its approach makes difficult to test these corner cases.

[itchwoot]

@itchwoot did you arrive to any valid solution to successfully test this?

Sadly no, I ended up just not testing this functionality :(