Upstairs/Downstairs Posts - Answer Overflow

Upstairs/Downstairs

•Created by Upstairs/Downstairs on 8/20/2024 in #❓・help

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!

1 replies

Gaming

Programming