How to unit testing by mock methods in for a Vue component using ViTest?

Question

Unit test vue component by mocking methods using vitest.

MyComponent.vue

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

const isSelectAll = ref(true);
const selectAllModel = ref(false);

const onChange = () => {
    isSelectAll.value = true;
    selectAllModel.value = false;
};
const onVisibleChange = () => {
  // do something than call
  onChange();
};
</script>

I want to unit test method onVisibleChange by mocking onChange and check that onChange has been called.

MyComponent.spec.js

import { mount } from 'vitest';
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  const wrapper = shallowMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  wrapper.vm.onVisibleChange();
  expect(spy).toHaveBeenCalled();
  expect(wrapper.vm.onChange).toHaveBeenCalled();
  // Both the expect gives error: AssertionError: expected "onChange" to be called at least once

  //Also tried
  const mock = vi.fn();
  wrapper.vm.onChange = mock;
  wrapper.vm.onVisibleChange();
  expect(mock).toHaveBeenCalled();   // AssertionError: expected "spy" to be called at least once
  expect(wrapper.vm.onChange).toHaveBeenCalled();  // TypeError: [Function onChange] is not a spy or a call to a spy!
})

Adrian Mole · Accepted Answer · 2023-08-13 11:02:06Z

1

It's not a good idea to test methods. Because the names of functions can be changed.

Better to test:

Emits from component. Maybe your onChange() includes emit. This emit should be tested.
Changes in templates. For example, your onChange() changes the template. So these changes should be tested too.
Calls other functions. For example, you have common functions which you use in all your project. This functions can be spy.on

edited Aug 13, 2023 at 11:02

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Aug 8, 2023 at 18:32

Ali Vad

294 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to unit testing by mock methods in for a Vue component using ViTest?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related