在 React 开发中，我们可以使用 Enzyme 来进行单元测试，确保我们的组件能够正常工作。而在测试组件时，我们经常需要向子组件传递 props 或者调用子组件的函数，其中一个常见的问题是 Mock 子组件的状态来模拟不同的组件渲染情况。这个时候，我们可以使用 getInitialState 函数来对子组件的状态进行 Mock。
getInitialState 函数简介
在 React 中，getInitialState 是一个组件内部定义的函数，用于初始化组件的初始 state 值。我们通常可以在这个函数中设置一些默认值，以保证组件在 render 之前具有合适的状态。
如何用 getInitialState 进行 Mock
在测试中，我们可以将子组件的某些状态 Mock 成我们期望的值，从而模拟出组件的不同状态来进行测试。这时，我们可以使用一个 MockComponent 来代替子组件，然后在这个 MockComponent 中定义一个 getInitialState 函数来设置状态值。
下面是一个示例代码：
-- -------------------- ---- -------
-- ---
----- -------------- ------- --------------- -
----- - -
------ -
--
-------------- - -- -- -
----------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
-----
------------------------------
------- -----------------------------------------
------
--
-
-
-- ---
----- --------------- ------- --------------- -
-------- -
------ -
-----
--------------- --
------
--
-
-我们现在想要测试这个 ChildComponent，但是我们想要 Mock 掉它的 state，来模拟组件处于不同的状态。我们可以使用 Enzyme 的 shallow 函数来进行测试，并在 shallow 中使用一个 MockComponent，如下所示：
const wrapper = shallow(<ChildComponent />, {
wrappingComponent: MockComponent
});然后，我们可以在 MockComponent 中定义一个 getInitialState 函数，来设置我们期望的状态值：
const MockComponent = ({ children }) => {
const getInitialState = () => ({ count: 2 });
return <div>{children}</div>;
};这里，我们将 count 设置为 2，而不是默认的 0。这样，在测试时，我们的子组件将会处于一个不同的状态。
总结
使用 getInitialState 函数可以简单地 Mock 子组件的状态，让我们能够更好地进行单元测试。当我们需要测试不同状态下组件的渲染情况时，可以使用这种方式来轻松地实现 Mock。此外，我们也可以将 getInitialState 函数用于正常的组件开发中，来设置组件的初始状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1829283d39b48815caa44