Input Value is not Passed to Spied Function

[zhao-li]

Hi Folks 👋

I am a newbie trying to get my first tests working for VueJS. Sorry, I tried my best Googling and reading the docs but could not figure this out.

I have the following component and test that calls out to a Pinia store. I am trying to verify that the store method is called with the proper arguments. Try as I may, I cannot figure out why the message attribute is always being passed to the function as an empty string.

Test Failure Message:

Received: 
    1st spy call:

    Array [
      Object {
  -     "message": "arbitrary message",
  +     "message": "",
      },
    ]
Number of calls: 1

Any ideas on where I goofed?

Thank you for your time 🙏

Demo App & Tests that reproduces the error: https://stackblitz.com/edit/vitejs-vite-38qokp?file=src/components/greeting/CreateGreeting.vue

Component:

<script setup>
import { ref } from "vue";
import { useGreetingStore } from "@/stores/greeting";

const store = useGreetingStore();
const greeting = ref({
  message: "",
});

function processForm(greeting) {
  store.addGreeting(greeting);
  greeting["message"] = "";
}
</script>

<template>
  <h2>Create a Greeting:</h2>
  <form @submit.prevent="processForm(greeting)">
    <input v-model="greeting['message']" name="new-message" />
    <input type="submit" value="Save" />
  </form>
</template>

Test:

import { createTestingPinia } from "@pinia/testing";
import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import { nextTick } from 'vue'

import CreateGreeting from "@/components/greeting/CreateGreeting.vue";
import { useGreetingStore } from "@/stores/greeting.js";

describe("Create", () => {
  it("creates a greeting", async () => {
    const wrapper = mount(CreateGreeting, {
      global: {
        plugins: [
          createTestingPinia(),
        ],
      },
    });

    const store = useGreetingStore();
    const newMessage = "arbitrary message";

    const input = await wrapper.find("input")
    await input.setValue(newMessage);
    console.log(input.element.value) // the update shows up this way
    console.log("html: " + input.html()) // the update does not show up this way
    console.log("text: " + input.text()) // the update does not show up this way
    console.log(input.attributes()) // the update does not show up this way
    await input.trigger("blue"); // this won't trigger a function call
    await nextTick() // has no affect

    const button = await wrapper.find("input[type=submit]")
    await button.trigger("click"); // this won't trigger a function call
    await wrapper.find("form").trigger("submit"); // this triggers a function call but without the proper arguments

    expect(store.addGreeting).toHaveBeenCalledWith({
      message: newMessage,
    });
  });
});

Store:

import $axios from "@/services/core-service.js";
import { defineStore } from "pinia";

export const useGreetingStore = defineStore("greeting", {
  state: () => {
    return {
      greetings: [],
    };
  },
  actions: {
    async addGreeting(greeting) {
      console.log(greeting)
      const response = await $axios.post(
        "/greetings/relational-database/",
        greeting
      );
      const savedGreeting = response.data;
      this.greetings.push({
        id: savedGreeting["id"],
        message: savedGreeting["message"],
      });
    },
  },
  ...
});

[cexbrayat]

Hi @zhao-li
Can you make an online repro using https://stackblitz.com/edit/vitest-dev-vitest-fum9v4?initialPath=__vitest__ ?
It's easier for us to take a look.

[cexbrayat]

Yes, you should use the link I used above, which sets up a project with runnable unit tests.
You should then be able to launch your unit test and reproduce your issue 👍

[zhao-li]

@cexbrayat okay, I've got the issue reproducible on StackBlitz: https://stackblitz.com/edit/vitejs-vite-38qokp?file=src/components/greeting/CreateGreeting.vue

I'll update the question with a link to it.

Also, I figured out why your link had a terminal whereas when I created a brand new Vue app, there was not terminal.

Certain StackBlitz templates use EngineBlock while other use WebContainers. Only the WebContainer templates have a terminal: https://developer.stackblitz.com/guides/user-guide/available-environments

Sorry, it was easier to get the web app and tests to work using a Vite+Vue template rather than the template you linked to.

I hope this gets the job done. If not, please let me know and I'll make the modifications.

Thanks again for your time 🙏

[cexbrayat]

👍 thanks.

One thing looks weird to me: the way you reset the ref to an empty value. To use a ref in Vue, you usually do myRef.value = newvalue.

If you replace greeting['message'] = ''; with greeting.value.message = ''; then the test succeeds

[cexbrayat]

Or you can use reactive instead of ref.
I also noticed that your action is async, but you don't await it in processForm.

I would do somethinglike:

const greeting = reactive({
  message: '',
});

async function processForm() {
  await store.addGreeting(greeting);
  greeting.message = '';
}

And the test succeeds as well.

[zhao-li]

Wow, thank you so much for helping me track this all down.

Using async and await worked perfectly. Thank you for catching that goof on my part.

Thank you also for pointing me to reactive. I've never encountered it before. I Google'd and read up on it a bit, but things are still very fuzzy to me as to which I should use.

These were helpful, but I think I'm still too new to fully grasp the concepts:

• https://vuejsdevelopers.com/2022/06/01/ref-vs-reactive/
• https://stackoverflow.com/questions/61452458/ref-vs-reactive-in-vue-3

I'm more or less stuck between these options:

• reactive:

const greeting = reactive({
  message: "",
});

• ref

const greeting = ref({
  message: "",
});

• reactive and ref

const greeting = reactive({
  message: ref(""),
});

You've helped me learn so much about VueJS and cool tools like StackBlitz.
Thank you for all of your help 🙏

This is just notes in case others or "future me" circles back to this:
I also tried out the following when using just the ref, but I think async and await fixes my overall issue:
greeting["message"].value = "";
and
greeting.value["message"] = "";
and
greeting.message.value = "";

allows the test to pass but generates this warning in the test: [Vue warn]: Unhandled error during execution of native event handler
Breaks the functionality in the application with these error messages, respectively:

• TypeError: Cannot create property 'value' on string 'asdf'
• TypeError: Cannot set properties of undefined (setting 'message')
• TypeError: Cannot create property 'value' on string 'asdf'

[freakzlike]

What happens if you not clear the message with greeting["message"] = "";? Could be that the spy handler is not cloning the object? 🤔

[zhao-li]

Dude, that worked! But if I need the input cleared, how should I get the test to pass and have that behavior implemented? Thank you so much for that clue. Sorry, I have no idea what you mean by:

spy handler is not cloning the object

If you have any tips on where to go next, that will help me a ton.

Thanks again for your insight.