前言
在 React 组件编写期间，我们经常需要在测试时使用到 context，这时候我们可以使用 @marudor/react-stub-context 这个 npm 包来完成这个需求。@marudor/react-stub-context 是一个用于 React 组件测试的 Context Stub 工具，它允许我们在单元测试时，动态注入任意的 context 数据。
安装
通过 npm 安装 @marudor/react-stub-context
--- ------- --------------------------- ----------
或者使用 yarn
---- --- ----- ---------------------------
使用
首先，在测试用例中引入 @marudor/react-stub-context
------ ----------- ---- ------------------------------
考虑一个简单的 React 组件，它需要一个 currentUser 属性，而 currentUser 是由上层组件以 context 的形式传入的。在测试时，我们需要动态的模拟这个 currentUser 属性。
下面是一个使用使用 @marudor/react-stub-context 的测试用例：
------ ----- ---- -------
------ - ------- ------- - ---- ------------------------
------ ----------- ---- -----------------------------
------ --- ---- -------
-------------- ---- -- -- -
------------------
----------- --- ---- -- --- ------- ------ -- -- -
----- ----------- - --------------------- ------------ - ----- ----- ----- - --
----- - --------- - - -------
--------------------- -------- ------------ ------ ----- ---- --- ---
------------ --------------------- -------- ------------ - ----- ----- ---- ----- - ---
---- --
--------------
-----------------------
-
---------------------- ---- ---------------------------
--
--上述测试用例中，我们动态的注入了一个 currentUser 属性，它的值为 { name: 'Test User Stub' }，这个测试用例会将这个值注入 <App /> 组件中，并渲染该组件，最终使用 expect 检查组件是否正确渲染后 "Test User Stub"。
API
<StubContext context={Context} value={{value}} />
contextReact Context 对象。必须要提供，否则无法注入 Context。
value对应 Context 数据。这个值可以是任意的 JavaScript 对象。
结束语
@marudor/react-stub-context 使用了 React 的 context API，让我们可以通过注入自定义的 Context 数据来快速测试 React 组件的功能。同时，它也方便了我们对代码的重构和维护。希望通过这篇文章，读者可以掌握如何使用 @marudor/react-stub-context 这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e481e8991b448e0779