ウェブサイト検索

typescript - vue/test-utils - コンポジションAPIをどうテストするか?


セットアップコンポーネントをテストできません

<script lang="ts" setup>
 ... logic ...
</script>

例えば、私が次のようなコンポーネントを持っているとしましょう:

RegistrationComponents.vue
<template>
        <input
          maxlength="255"
          @input="ch"
          type="email"
          name="email"
          class="input email_address"
          autocapitalize="off"
          :class="{ 'bg-status-red-border': errorEmail[0] }"
        />
</template>
<script lang="ts" setup>
import { useFetch } from "@/hook/fetch/fetch";
import PasswordComponent from "../password/passwordComponent.vue";
import { useStore } from "vuex";

... and more logic ...

</script>


test.spec.ts:

import RegistrationComponents from "@/components/registration/RegistrationComponents.vue";
import { expect, test } from "@jest/globals";
import { mount } from "@vue/test-utils";

test("1. The user with the data exists in the system. [email ", async () => {
  const wrapper = await mount(RegistrationComponents, {
    global: {
      mocks: {
        $tc: (msg: string) => msg,
      },
    },
  });

  const emailInput = wrapper.find<HTMLInputElement>(".email_address");

  emailInput.setValue("[email ");

  expect(emailInput.element.value).toBe("[email ");
});

そのようなコンポーネントをテストしようとすると、エラーが発生します:

TypeError: 未定義のプロパティを読み取ることができません('0'を読み取り中)

結局のところ、問題はそのようなコンポーネントにテンプレートが存在しないことです

この問題はどのように解決できますか?私のコンポーネントはすべて setup で書かれています

本当にすべてをクラスコンポーネントに書き直さなければいけないのですか?本当に他に解決方法はないのですか?

enter code here

この問題を解くのを手伝ってください