開玩笑測試 redux 連接的組件給出錯誤“請確保組件包裹在<provider> ”</provider>

Question

我正在嘗試使用我的反應應用程序中需要 redux 的useDispatch()的組件進行測試。 我得到錯誤

找不到 react-redux 上下文值； 請確保組件被包裹在一個

除了使用 redux 的useDispatch()的組件之外，我在任何其他組件上都沒有收到此類錯誤。

這是錯誤

它顯示了組件的一部分

  could not find react-redux context value; please ensure the component is wrapped in a <Provider>

  10 |   //props so I can re-use it on homepage and in user page.
  11 |   const [query, setQuery] = useState('')
> 12 |   const dispatch = useDispatch()
     |                    ^
  13 | 
  14 |   const handleCriterionChange = () => {
  15 |     const value = document.getElementById("searchCriteria").value;

Answer 1

您可能沒有在 Provider 中呈現經過測試的組件，但是您將整個應用程序包裝在一個中，因此調度是從那里傳遞下來的。 您需要在測試中另外包裝該組件。

// In your test
render(<Providers store={YOUR STORE}>YOUR COMPONENT</Provider>)

這將讓被測試的組件訪問調度。

您還可以生成一個幫助程序，您可以將要測試的組件傳遞給它以自動將其包裝在提供程序中：

function renderWithWrapper = children => <Providers store={YOUR STORE}>{children}</Provider>