在 React/Jest 單元測試中，你如何模擬被模擬組件調用的事件道具？

Question

假設我有一個 React 組件，它是一個帶有用戶名字段的登錄表單。 如果用戶將用戶名設置為空字符串，則組件會顯示錯誤消息。

這是代碼：

const LoginForm = () => {
  const [errorMessage, setErrorMessage] = useState(''),
    handleOnChangeUsername = (newUsername: string) => {
      if (newUsername.trim() === '') {
        setErrorMessage('Username is required.');
      } else {
        setErrorMessage('');
      }
    };

  return (
    <form>
      <UsernameField onChange={handleOnChangeUsername} />
      {errorMessage && <Error message={errorMessage} />}
    </form>
  );
};

我想對這個組件進行單元測試。

所以我想編寫一個測試來驗證當用戶輸入一個空白用戶名時，下面會顯示錯誤消息：“需要用戶名”。

為了編寫這個單元測試，我假設我需要執行以下操作：

1. 掛載 LoginForm 組件，提供一個模擬的 UsernameField 組件。

2. 獲取模擬的 UsernameField 組件以調用其 onChange 道具，並傳入一個空白字符串。

3. 斷言 LoginForm 組件現在正在呈現一個 Error 組件（即 handleOnChangeUsername 中的代碼實際上運行並產生了正確的副作用）。

模擬部分很簡單——我只是調用 jest.mock(...)，傳入模塊的路徑和模擬實現。

棘手的一點是第 2 步。如何讓我的單元測試使模擬調用它自己的道具之一，以模擬使用空字符串調用的 onChange？

似乎必須有一些通道，單元測試代碼可以通過該通道與模擬組件的內部 props 進行通信。

在 React/Jest 單元測試中是否有一種簡單和/或慣用的方法來做到這一點？

注意：這個問題假設一個嘲笑風格。 我知道有些開發人員可能會說我應該通過操作 Username 組件呈現的 DOM 元素直接觸發 Username onChange。 我已經知道該怎么做了。 但我想遵循嘲笑風格並完全模擬用戶名組件。

Answer 1

好吧，我似乎找到了至少一種訪問道具的方法。 不過，它需要Enzyme ； 仍然不確定如何在沒有酶的情況下做到這一點。

Enzyme 的包裝器包括一個props()方法，它返回被包裝組件的 props。

所以我可以這樣寫：

const root = mount(<LoginForm />);
root.find("UsernameField").props().onChange("");
expect(root.find("Error").exists()).toBeTruthy();