在 React 项目的开发中，单元测试是一项重要的任务。而 Enzyme 是一个流行的 React 测试工具，它提供了丰富的 API 来模拟和操作组件。但是，在使用 Enzyme 进行测试时，你可能会遇到“TypeError: Cannot read property 'setState' of undefined” 错误。
这个错误通常发生在尝试调用一个组件的 setState() 方法时，它会指出测试中无法找到组件的实例。如果你也遇到了这个错误，那么本文将告诉你如何解决。
原因
Enzyme 的测试是基于虚拟 DOM 的，这意味着你需要通过一个包装器来访问组件。然而，在某些情况下，组件的实例可能不会正确地传递给包装器。
例如，假设你有一个名为 MyComponent 的组件，它使用了类的方式声明，如下所示：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
-- ---
-
-在测试中，你可能会使用这种方式来包装组件：
const wrapper = shallow(<MyComponent />);
但当你尝试调用 setState() 时，你会得到上述错误，因为此时 this 的值为 undefined。
解决方案
要解决这个问题，最简单的方法是使用箭头函数来定义组件中的方法。这种方式可以更好地处理 this 关键字的作用域问题，确保组件实例正确地传递给包装器。
在我们的例子中，你可以这样将 setState() 方法定义为箭头函数：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- - -- -- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
---------- -----------------------
------- ---------------------------------------------
------
--
-
-注意，箭头函数 handleClick 不需要显式地绑定 this，因为箭头函数继承了其父级作用域的 this 值。
这个改变后，你就可以在测试中正确地调用 setState() 了：
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');
expect(wrapper.find('h1').text()).toEqual('Count: 1');总结
在本文中，我们介绍了 Enzyme 报错 “TypeError: Cannot read property 'setState' of undefined” 的原因，并提供了解决方案。通过使用箭头函数来定义组件中的方法，我们可以更好地处理 this 关键字的作用域问题，从而避免这个错误的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b6ae7968c7c53b0abbc00