i want to know how to set composition API in mount second option plz

[byeongwan-kim]

hello, i attach sample code.
well, i want to change password's value is 'short'
but when i execute 'console.log()', then it's result is 'long'
how can change password's value?

// Password.vue
<template>
  <input
    v-model="password"
  >
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Password',
  setup() {
    const password = ref('long');
    return {
      password,
    };
  },
};
</script>

// Password.spec.js
import { ref } from 'vue';
import { mount } from '@vue/test-utils';
import Password from 'main/components/Password';

test('Change password value', () => {
  const wrapper = mount(Password, {
    setup() {
      const password = ref('short');

      return {
        password,
      };
    },
  });

  console.log(wrapper.vm.password); // expect: short
                                    // result: long
});

[cexbrayat]

Hi @EXEM-KBW

You can simply do something like:

test('Change password value', async () => {
  const wrapper = mount(Password);
  // change the password value
  wrapper.vm.password = 'short';
  // refresh the DOM
  await nextTick();
  const input = wrapper.get('input');
  expect(input.element.value).toBe('short'); 
});

[byeongwan-kim]

Thank you for your answer👍.
I have one more question.
Why does not support setup() of composition API in the second argument of the mount()?

[cexbrayat]

I think that it is probably not useful. You can do pretty much what you want with wrapper.vm and Jest spies if you work with the Composition API. I have several apps in TS/Vue 3/Composition API with hundreds of tests: you always have a way to test your component with the current Vue Test Utils 🙂