小弟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密碼的錯誤資訊這樣是不是至少就有三個．