CODEWITHSUNDEEP
vuejs3vitest
user42488
user42488

Reputation: 1455

How to test component that uses reactivity api in a vue3 using vitest

I'm using the simple state management with Reactivity API .

I would like to test my component that depends on the store. How to mock the store?

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0
})

<!-- ComponentA.vue -->
<script setup>
import { store } from './store.js'
</script>

<template>{{ store.count }}</template>

And finally the test:

import { expect } from "vitest";

test("shows correct count", async () => {
  const view = customRender(<ComponentA>Test</ComponentA>);
  expect(await view.findByText("10")).toBeInTheDocument();
});

Cheers

Upvotes: 0

Views: 337

Answers (1)

user42488
user42488

Reputation: 1455

It is so simple, so I guess nobody bothered putting it anywhere:

import { expect } from "vitest";
import { store } from "@/stores/store";

test("shows correct count", async () => {
  store.count = 10;
  const view = customRender(<ComponentA>Test</ComponentA>);
  expect(await view.findByText("10")).toBeInTheDocument();
});

Hope it helps. As always, enjoy.

Upvotes: 0

Related Questions