Cannot spyOn on a primitive value; undefined given . Vue JS, Jest, Utils

Question

I try to use spyOn to spy the functions and it's implementation. However, i got this error. "Cannot spyOn on a primitive value; undefined given".

I already read the documentation of jest.spyOn in https://jestjs.io/docs/en/jest-object . But it keeps showing the same errror... is there anything that i should add and improve?

below is the code

<template>
  <div>
    <form @submit.prevent="onSubmit(inputValue)">
      <input type="text" v-model="inputValue">
      <span class="reversed">{{ reversedInput }}</span>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: ['reversed'],
  data: () => ({
    inputValue: '',
    results: [],
  }),
  methods: {
    onSubmit(value) {
      const getPromise = axios.get(
        'https://jsonplaceholder.typicode.com/posts?q=' + value,
      );

      getPromise.then(results => {
        this.results = results.data;
      });

      return getPromise;
    },
  },
};
</script>

while the test code is

import axios from 'axios'; // axios here is the mock from above!
import { shallowMount } from '@vue/test-utils';


import Form from '@/components/Form.vue';

describe('Form.test.js', () => {
  const wrapper;

  describe('Testing Submit events', () => {
    wrapper = shallowMount(Form);
  
    it('calls submit event', () => {
        const onSubmit = jest.spyOn(Form.prototype, 'onSubmit') // mock function
  
        // updating method with mock function
        wrapper.setMethods({ onSubmit });
  
        //find the button and trigger click event
        wrapper.findAll('form').trigger('submit');
        expect(onSubmit).toBeCalled();
    })
  

  });

})

Can you also vrief me what and how to use spyOn to test the method?

Thank you so much

Best regards

Lughni

Answer 1

Component definition suggests that Form is an object. Form.prototype === undefined because Form is not a function. Since Vue class components aren't in use, nothing suggests the opposite.

It can be spied as:

jest.spyOn(Form.methods, 'onSubmit')

This should be done prior to component instantiation. And spyOn with no implementation provided creates a spy, not a mock.