[Vuejs]-Can't access method in Vue Single File Component with Jest when using <script setup>

by

3👍

The bindings declared in <script setup> are hidden by default, but you can expose any of them to the component instance with defineExpose():

// MyComponent.vue
<script setup>
const testMethod = function(input) {
  return input + 1;
};

defineExpose({
  testMethod
})
</script>

Then in your test, access the exposed bindings via wrapper.vm (the component instance from the @vue/test-utils wrapper):

// MyComponent.spec.js
import MyComponent from '@/components/MyComponent.vue'

test('should be 2', () => {
  const wrapper = shallowMount(MyComponent)
  expect(wrapper.vm.testMethod(1)).toBe(2)
})

demo

👤tony19

0👍

if you use the wrapper of the mount method from vue test @vue/test-utils. Then just call the methods using (wrapper.vm as any) it works. Only the typescript compiler is unable to recognize and raise the error as property does not exist but when you try using something like below it works.

Eg: (wrapper.vm as any).someMethod()

👤Raviteja

Leave a comment