N
Nuxt•5mo ago
Upstairs/Downstairs

Component can't access `$props` in template when using `mountSuspended` from test utils

Hello all! I've been going through and adding testing into my Nuxt3 project as I prepare for an official release. I currently have a component that looks like this: 
<script setup lang="ts">
import { twMerge } from "tailwind-merge";

import type { BookCategory } from "~/types/bookCategory.types";

defineProps<{
  bookCategory: BookCategory;
}>();
</script>

<template>
  <div
    :style="`background-color: ${$props.bookCategory.category_color}`"
  >
    <UIcon name="i-heroicons-qr-code-20-solid" />
    {{ $props.bookCategory.category_label }}
  </div>
</template>
<script setup lang="ts">
import { twMerge } from "tailwind-merge";

import type { BookCategory } from "~/types/bookCategory.types";

defineProps<{
  bookCategory: BookCategory;
}>();
</script>

<template>
  <div
    :style="`background-color: ${$props.bookCategory.category_color}`"
  >
    <UIcon name="i-heroicons-qr-code-20-solid" />
    {{ $props.bookCategory.category_label }}
  </div>
</template>
And my unit test looks like this: 
// @vitest-environment nuxt
import { faker } from "@faker-js/faker";
import { mountSuspended } from "@nuxt/test-utils/runtime";
import { describe, expect, it } from "vitest";

import BookCategoryChip from "../BookCategoryChip.vue";

describe("<BookCategoryChip/>", () => {
  it("renders the book category label", async () => {
    const MOCK_CATEGORY = {
      id: faker.string.uuid(),
      category_color: faker.color.rgb(),
      category_user_id: faker.string.uuid(),
      category_label: faker.word.adjective(),
    };
    const component = await mountSuspended(BookCategoryChip, {
      props: {
        bookCategory: MOCK_CATEGORY,
      },
    });
    expect(component.text()).toContain(MOCK_CATEGORY.category_label);
  });
});
// @vitest-environment nuxt
import { faker } from "@faker-js/faker";
import { mountSuspended } from "@nuxt/test-utils/runtime";
import { describe, expect, it } from "vitest";

import BookCategoryChip from "../BookCategoryChip.vue";

describe("<BookCategoryChip/>", () => {
  it("renders the book category label", async () => {
    const MOCK_CATEGORY = {
      id: faker.string.uuid(),
      category_color: faker.color.rgb(),
      category_user_id: faker.string.uuid(),
      category_label: faker.word.adjective(),
    };
    const component = await mountSuspended(BookCategoryChip, {
      props: {
        bookCategory: MOCK_CATEGORY,
      },
    });
    expect(component.text()).toContain(MOCK_CATEGORY.category_label);
  });
});
I have a minimal vitest setup with: 
import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  // any custom Vitest config you require
  test: {
    include: ["**/__tests__/*.test.ts"],
    exclude: ["e2e/"]
  },
});
import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  // any custom Vitest config you require
  test: {
    include: ["**/__tests__/*.test.ts"],
    exclude: ["e2e/"]
  },
});
Every time this test runs, I get an error saying that I cannot read category_label of undefined. If I declare props in the setup block, with const myProps = defineProps<...> and then update the template, the test runs fine.
Additionally, using just mount directly from @vue/test-utils also works with $props without any issue Have I simply been setting up all my template props wrong? Or is there something I'm missing with the nuxt testing setup? I followed the basic steps outline in the testing docs, but I can't seem to find anything I've missed. Any help would be greatly appreciate!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?