前提・実現したいこと
テキストフォームに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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。