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
この問題を解くのを手伝ってください