userEvent.typeを用いて未入力テストを行うとエラーになる（Expected key descriptor but found "" in ""）

はじめに

新規登録モーダルのバリデーションテストを行っているのですが、未入力テストを実装中にエラーが発生しました

問題

今回、学習時間を未入力で登録した際に、エラーメッセージが表示されて登録がされないことを確認するためのテスト実装をしていました。
しかし、エラーが発生してしまいました。

componenteSample.spec.jsx

const mockTodos = [{ id: 1, studyContent: "記録6", studyTime: 4 }];

jest.mock("../../utils/supabasefunctions", () => ({
  getAllTodos: jest.fn(() => Promise.resolve(mockTodos)),
}));

jest.mock("../../utils/supabase", () => ({
  supabase: {
    from: jest.fn(() => ({
      delete: jest.fn(() => ({
        match: jest.fn().mockResolvedValue({ error: null }),
      })),
      select: jest.fn().mockResolvedValue({ data: [], error: null }),
      insert: jest.fn().mockResolvedValue({ data: [{}], error: null }),
    })),
  },
}));
import { App } from "../App";
import React from "react";
import "@testing-library/jest-dom";
import { render, screen, waitFor, cleanup } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { AuthWeakPasswordError } from "@supabase/supabase-js";


beforeEach(() => {
  cleanup();
});
afterEach(() => {
  cleanup();
});
describe("Test", () => {

  test("入力されていない項目があります", async () => {
    render(<App />);
    const user = userEvent.setup();
    const topicInput = await screen.findByTestId("topic-input");
    const timeInput = await screen.findByTestId("time-input");
    const button = screen.getByRole("button", { name: "登録" });

    await user.type(topicInput, "記録4");
    await user.type(timeInput, "");
    await user.click(button);
    expect(await screen.findByTestId("error")).toHaveTextContent(
      "入力されていない項目があります",
    );
    screen.debug();
  });
});

 ● Test › 入力されていない項目があります

    Expected key descriptor but found "" in ""
        See https://testing-library.com/docs/user-event/keyboard
        for more information about how userEvent parses your input.

      at assertDescriptor (node_modules/@testing-library/user-event/dist/cjs/utils/keyDef/readNextDescriptor.js:75:15)
      at readPrintableChar (node_modules/@testing-library/user-event/dist/cjs/utils/keyDef/readNextDescriptor.js:31:5)
      at Object.readNextDescriptor (node_modules/@testing-library/user-event/dist/cjs/utils/keyDef/readNextDescriptor.js:26:26)
      at Object.parseKeyDef (node_modules/@testing-library/user-event/dist/cjs/keyboard/parseKeyDef.js:18:118)
      at Object.keyboard (node_modules/@testing-library/user-event/dist/cjs/keyboard/index.js:8:33)
      at Object.type (node_modules/@testing-library/user-event/dist/cjs/utility/type.js:17:16)
      at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:87:22)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        14 s

解決方法

問題は時間の箇所がデフォルトで0になるように設定したいたことでした。
未入力であることを確認したい場合はuserEvent.clearを使用します。

    await user.clear(timeInput);
    // await user.type(timeInput, "");

おわりに

default値がどのように設定されているかは把握しよう

参考