TestingLibraryElementError: Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

はじめに

CI/CD実行でエラーが発生しました。

問題

同じエラーで止まっている記事を参考に修正しました。
<input>要素にid属性を追加し、<label>のfor属性と一致させる必要があるとのことでした。

ただし、今回は<input>はないため<select>で対応しました。

SearchForm

            <label className="mb-2 block font-medium" for="budget-label">
                予算
            </label>

            <select
                {...register("budget")}
                id="budget-label"
                className="w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
            >

しかし、forでProperty 'for' does not exist on typeとなっていました。

解決方法

forではなく、htmlForとするとエラーはなくなりました。

おわりに

つぎにいきます。

参考文献