質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2812閲覧

ボタンがdisabledかを検証するテストの書き方

R-Fujimoto

総合スコア13

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/02/17 13:52

編集2020/02/17 13:55

前提・実現したいこと

テキストフォームにfooと入力するとボタンが押せるようになり、ボタンを押すとコンソールに「success」と表示します。
demo

フォームに入力された文字によって、フォーム下のボタンのdisabled状態を検証するテストの書き方をご教示いただけないでしょうか。

問題点

テストコードでテキストフォームにvalueを入力し、ボタンをクリックするところまでは書けたのですが、expect()をどのように書くとよいか分かりません。

現状でもテストを実行後にコンソールを確認すれば入力値がfooの場合とfoo以外の場合の判別はできるのですが、どのような場合でもエラーにならないテストかと思いますので、テストの意味をほぼ成していない状態です。

使用しているツール

  • Jest
  • React Testing Library

該当のソースコード

App.spec.js

js

1import React from "react"; 2import "@testing-library/jest-dom/extend-expect"; 3import { cleanup, render, fireEvent } from "@testing-library/react"; 4 5import App from "./App"; 6 7describe("check input text", () => { 8 afterEach(cleanup); 9 const setup = () => { 10 const utils = render(<App />); 11 const input = utils.getByLabelText("text"); 12 const button = utils.getByText("button"); 13 return { 14 input, 15 button, 16 ...utils 17 }; 18 }; 19 20 it("click button success", () => { 21 const { input, button } = setup(); 22 fireEvent.change(input, { target: { value: "foo" } }); 23 fireEvent.click(button); 24 }); 25 26 it("click button faile", () => { 27 const { input, button } = setup(); 28 fireEvent.change(input, { target: { value: "bar" } }); 29 fireEvent.click(button); 30 }); 31});

App.js

js

1import React, { useState } from "react"; 2 3export default function App() { 4 const [text, setText] = useState(""); 5 const button = () => { 6 console.log("success"); 7 }; 8 9 return ( 10 <> 11 <input 12 type="text" 13 aria-label="text" 14 onChange={e => setText(e.target.value)} 15 /> 16 <p>plese type "foo"</p> 17 <button onClick={button} disabled={text === "foo" ? false : true}> 18 button 19 </button> 20 </> 21 ); 22}

試したこと

  • fooを入力した状態でボタンをクリックした場合、ボタンのイベントが1回実行されることを期待するテスト
  • foo以外を入力した状態でボタンをクリックした場合、ボタンのイベントが0回実行されることを期待するテスト

上記2通りのテストを書ければ、入力値によるdisbaledの制御が検証できるテストになるかと思い、下記のテストを書いてみました。

jsx

1it("click button success", () => { 2 const { input, button } = setup(); 3 fireEvent.change(input, { target: { value: "foo" } }); 4 expect(() => fireEvent.click(button)).toBeCalledTimes(1); 5}); 6 7it("click button faile", () => { 8 const { input, button } = setup(); 9 fireEvent.change(input, { target: { value: "bar" } }); 10 expect(() => fireEvent.click(button)).toBeCalledTimes(0); 11});

このテストを実行すると下記のエラーが表示されます。

expect(...).toBeCalledTimes is not a function

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ブラウザ上での動作を行うe2eテストみたいなものは
テストピラミッドではUIテストに分類されます

UIテストが最上位にあるのは必要最小限に留めろという意味です。
理由は2つ

  • 実行が重く高コスト、結果が帰ってくるのが遅いので負債になる
  • デザイン修正等でHTMLの構造がちょっと変わるだけですぐ壊れる

最も少なく書けという事でシナリオテストをさらっと書いて終わりです。
ユーザーが意地悪な操作や複雑な操作をするという体で書かない方が良いです。
どうせ後々ゴミとして捨てられる事になりますからね。


さて、本題に入ります。

input要素のdisabled属性が有効か否かを判断するだけで問題ないと思います。
日本語で流れをさらっと書くとこんな感じ

  • ページを開く
  • ページのレンダリングが終わるまで待つ
  • テスト: ボタンのdisabled属性が存在しないこと
  • ボタンをクリック
  • テスト: ボタンのdisabled属性が存在すること

投稿2020/02/18 03:26

miyabi-sun

総合スコア21194

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問