在 React 应用中,Redux 已经成为了管理状态的主流解决方案。为了保证代码的可靠性,我们需要对 Redux 中的 state 进行测试。在本文中,我们将介绍如何使用 Enzyme 来测试 React 组件中的 Redux 的 state,包括如何设置 store、获取和修改 state,以及如何模拟 Redux 的 action。
什么是 Enzyme?
Enzyme 是一个由 Airbnb 开发的 React 组件测试库,它提供了一套简单且易用的 API,用于测试组件的输出、渲染和交互等方面。Enzyme 将 React 组件封装在浅层渲染器(shallow renderer)中,从而使测试变得简单高效。
设置 Redux 的 store
在使用 Enzyme 测试 React 组件中的 Redux 的 state 之前,我们需要先创建一个 Redux 的 store。可以采用 createStore
函数创建一个空的 store,或者使用 Redux 的应用程序状态初始值(initialState)创建 store。在测试文件中,我们可以在 beforeEach
块中创建 store,并将其传递给组件作为属性。以下是一个例子:
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ------ ------- ---- ------------- --- ------ ------------- -- - ----- - -------------------- ------- ---- --- ----------------- ----------- -- -- - ----------- ------- ---------- -- -- - ----- --------- - ----------------- ---------------------- --------------- ----------------------------------------- --- -- --- ---
在上面的代码中,我们创建了一个名为 store
的 Redux store,并将其传递给 Counter 组件作为属性。请注意,在创建 store 和渲染组件之前,我们需要在测试用例中包装组件,使用 Provider
包裹组件,并将 store 作为 store
属性的值传递给 Provider
组件。
获取和修改 state
我们可以通过 store 的 getState()
方法来获取当前的 Redux state。在组件的测试中,我们需要获取、修改,甚至模拟 Redux state,以模拟 interaction。以下是一个 Counter 组件的测试用例:
-- -------------------- ---- ------- ----------------- ----------- -- -- - ----------- ------- ---------- -- -- - ----- --------- - ----------------- ---------------------- --------------- ----------------------------------------- --- -------------- --- --------- -- -- - ----- --------- - ----------------- ---------------------- --------------- ----- ------------ - ----------------------- ------------------------------------------------------ --------------------------------------------------- - --- --- -------------- --- --------- -- -- - ----- --------- - ----------------- ---------------------- --------------- ----- ------------ - ----------------------- ------------------------------------------------------ --------------------------------------------------- - --- --- ---
在上面的代码中,我们模拟了两种场景:counter 增加和 counter 减少。我们首先获取使用 store 的 getState()
方法获取当前的 count 值,然后模拟用户点击 increment 或 decrement 按钮,并使用 expect()
方法来测试是否按预期增加或减少了 count 值。
模拟 Redux 的 action
我们还可以使用 Enzyme 来模拟 Redux 的 action,并测试 state 是否按照预期修改。React-Redux 库提供了 shallowWithStore
函数来测试 Redux 中的 action。以下是一个例子:
-- -------------------- ---- ------- ----- ----- - - ------ -- ---------- ---------- -- ----------------- ----------- -- -- - ----------- ------- ---------- -- -- - ----- ------- - ---------------- ---------- ---- --------------------------------------- --- --------- --------- -------- ---- ------ -- --------- -- -- - ----- ------- - ------------------------- ---------- --- ------- ---------------------------------------------------- ------------------------------------------------ --- ---
在上面的代码中,我们创建了一个带有 increment
函数的 props 对象,并将其作为 Counter 组件的属性传递。然后,我们使用 shallowWithStore
包装 Counter 组件,并模拟用户点击 increment 按钮,验证 increment()
函数是否被调用,以及调用时是否按照预期增加了 count 值。
总结
在本文中,我们介绍了如何使用 Enzyme 来测试 React 组件中的 Redux 的 state,包括如何设置 store、获取和修改 state,以及如何模拟 Redux 的 action。在编写测试代码时,请注意保持测试的简洁性和高效性,并遵循最佳实践,以获得更好的测试覆盖率和可靠性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b7719aadd4f0e0fffffff6