[Vuejs]-How to unit test VUE 3 Composition API methods?

1๐Ÿ‘

โœ…

Iโ€™ve made it work ๐Ÿ™‚

IMPORTANT is that this solution does NOT require any change in the component that is being tested โ€“ no need for "exposing" methods

Here is HelloWorld.spec.ts:

import { describe, it, test, expect } from "vitest";

import { mount } from "@vue/test-utils";
import HelloWorld from "../HelloWorld.vue";

describe("HelloWorld", () => {
    const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
    it("renders properly", () => {
        expect(wrapper.text()).toContain("Hello Vitest");
    });
    test('sum: adds 1 + 2 to equal 3', () => {
        // Access the Component method from the Composition API
        const instance = wrapper.vm;

        // The sum function is available within the instance
        const sumFunction = (instance as any).sum;

        const result = sumFunction(1, 2);

        expect(result).toBe(3);
      });
      test('mul: muls 2 * 3 to equal 6', () => {
        // Access the Component method from the Composition API
        const instance = wrapper.vm;

        // The mul function is available within the instance
        const mulFunction = (instance as any).mul;

        const result = mulFunction(2, 3);

        expect(result).toBe(6);
      })
});

and here is the component HelloWorld.vue that is tested:

<script setup lang="ts">
defineProps<{
  msg: string
}>()

const sum = (a: number, b: number) => {
  return a + b;
}

const mul = (a: number, b: number) => {
  return a * b;
}
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      Youโ€™ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
๐Ÿ‘คSinisa Rudan

2๐Ÿ‘

Composition API methods are not accessible externally. So any methods defined are intended for internal use within the component and should not be considered when using the component.

To test them, I recommend abstracting it into a ts file and import into the component and test file. Or expose the methods required for testing via defineExpose.

๐Ÿ‘คKaiKai

Leave a comment