storybookを使ってinput(text)タグをテストしてみた

はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。

「いいね」か「ブックマーク」
を頂けると僕のモチベーションアップになります！
少しでも気に入っていただけたらよろしくお願いいたします！

今回の目的

storybookでUIテストをしたかった中でhoverのようなイベントでスタイルが適用されているか？を確認したかったため

バージョン

React:18
storybook: 8.1.10

ボタンの作りについて

単純なtextを作成しました。最大７文字まで入力できます。

...
<input
  type="text"
  data-testid='text'
  maxLength={7}
/>
...

テストはこちら

storiesファイルはこちらです。
7桁までで入力されているかテストしています。

export const Default: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByTestId('text'),'12345678');
    await expect(canvas.getByTestId('text')).toHaveValue('1234567');
  },
};

結果はこちら

参考

expect

userEvent

最後に

閲覧いただきありがとうございました！