iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 9

Day 9 來了fireEvent

小弟fireEvent 與大哥user.event

各位在做測試時一定會遇到需要跟網頁互動的一些行為,例如資料輸入..等等

那這時候我們來模擬建立一個輸入來做測試.首先 我們先來看一段html

<div>
  <input
    role="account"
    name="account"
    onChange={handleChange}
    value={values.account}
    placeholder="Account"
  />
  {error && <div>請輸入帳號</div>}
  <input
    role="password"
    name="password"
    onChange={handleChange}
    value={values.password}
    placeholder="Password"
  />
  {error && <div>請輸入密碼</div>}
  <button>submit</button>
</div>

這段html主要是區分我們可以輸入兩個欄位分別是帳號跟密碼,當使用者在沒有輸入資料的情形下,按下submit會出現error

import App from '@pages/App';
import { cleanup, render, screen, fireEvent } from '@testing-library/react';

test('should show error when click login without fill any fields', () => {
    render(<Lobby />);
    fireEvent.click(screen.getByText('submit'));

    expect(screen.getByText('請輸入帳號')).toBeTruthy();
    expect(screen.getByText('請輸入密碼')).toBeTruthy();
  });

這就是可能其中的一個case,就是我們沒有輸入任何資料按下送出會輸出的error,當然你也可以想出其他的test case,例如說只輸入帳號或密碼,然後只出現請輸入帳號or密碼的錯誤資訊這樣是不是至少就有三個.


上一篇
Day 8: jest-dom
下一篇
Day 10 搜尋方式
系列文
我不會測試,所以寫Jest與React Testing Library30

尚未有邦友留言

立即登入留言