簡介

user-event 是 Testing Library 的配套函式庫，它透過發送如果互動在瀏覽器中發生時會發生的事件來模擬使用者互動。

與 `fireEvent` 的差異

fireEvent 發送的是 *DOM 事件*，而 user-event 模擬的是完整的 *互動*，這可能會發送多個事件並在此過程中進行額外的檢查。

Testing Library 的內建 fireEvent 是瀏覽器低階 dispatchEvent API 的輕量包裝，允許開發人員在任何元素上觸發任何事件。問題在於瀏覽器通常不只針對一個互動觸發一個事件。例如，當使用者在文字方塊中輸入時，元素必須先被聚焦，然後會觸發鍵盤和輸入事件，並且在輸入時會操控元素的選取和值。

user-event 可讓您描述使用者互動，而不是具體的事件。它會在過程中新增可見性和互動性檢查，並且像瀏覽器中的使用者互動一樣操控 DOM。它會將瀏覽器不會讓使用者點擊隱藏元素或在停用的文字方塊中輸入等情況考慮在內。
這就是為什麼您應該使用 user-event 來測試與元件的互動的原因。

然而，有一些使用者互動或這些互動的某些方面尚未實作，因此尚無法用 user-event 描述。在這些情況下，您可以使用 fireEvent 發送您的軟體所依賴的具體事件。

請注意，這會使您的元件和/或測試依賴您對互動具體方面的假設是否正確。因此，如果您已經投入精力指定此類互動的正確方面，請考慮為此專案做出貢獻，以便 user-event 也可能涵蓋這些情況。

使用 `userEvent` 編寫測試

我們建議在渲染元件之前先呼叫 userEvent.setup()。這可以在測試本身中完成，也可以透過使用設定函數來完成。我們不鼓勵在測試本身之外 - 例如在 before/after 勾點中 - 渲染或使用任何 userEvent 函數，原因在「測試時避免巢狀結構」中描述。

import userEvent from '@testing-library/user-event'

// inlining
test('trigger some awesome feature when clicking the button', async () => {
  const user = userEvent.setup()
  // Import `render` and `screen` from the framework library of your choice.
  // See https://testing-library.dev.org.tw/docs/dom-testing-library/install#wrappers
  render(<MyComponent />)

  await user.click(screen.getByRole('button', {name: /click me!/i}))

  // ...assertions...
})

import userEvent from '@testing-library/user-event'

// setup function
function setup(jsx) {
  return {
    user: userEvent.setup(),
    // Import `render` from the framework library of your choice.
    // See https://testing-library.dev.org.tw/docs/dom-testing-library/install#wrappers
    ...render(jsx),
  }
}

test('render with a setup function', async () => {
  const {user} = setup(<MyComponent />)
  // ...
})

請注意，雖然直接呼叫諸如 userEvent.click() 之類的 API (這會在內部觸發 setup) 在 v14 中仍然支援，但此選項的存在是為了簡化從 v13 到 v14 的移轉，以及用於簡單的測試。我們建議使用 userEvent.setup() 傳回的執行個體上的方法。

與 fireEvent 的差異​

使用 userEvent 編寫測試​

與 `fireEvent` 的差異

使用 `userEvent` 編寫測試