使用 Enzyme 测试 React 组件时遇到的 Invalid argument supplied to oneOfType 问题解决方式-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，我们经常会使用 Enzyme 来测试组件的行为。然而，在一些情况下，我们可能会遇到 Enzyme 报错“Invalid argument supplied to oneOfType”，这个错误通常与 propTypes 有关。

问题分析

假设我们有一个 React 组件，定义了一下 propTypes：

MyComponent.propTypes = {
  foo: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]).isRequired,
};

在使用 Enzyme 测试这个组件时，我们给这个组件传递一个非 string / number 类型的值，就会遇到上述报错。

这是因为 Enzyme 在渲染组件时会直接将 propTypes 传递给组件，而不是通过 React.createElement() 的方式。由于这一原因，如果我们在 propTypes 中使用某些类型检查函数（如 PropTypes.object 和 PropTypes.func），就可能会出现问题。

解决方法

一种解决方式是在 Enzyme 的 shallow() 方法中传递一个上下文环境：

const context = { router: { isActive: () => true } };
const wrapper = shallow(<MyComponent foo="bar" />, { context });

这样在测试时就会使用上下文环境中的 propTypes 引用，而不是直接使用组件的 propTypes。从而能够绕过上述问题。

另一种解决方式是使用 enzyme-adapter-react-16，这是 Enzyme 的官方 React 16 适配器，能够正常支持 propTypes。

安装方式：

npm install --save-dev enzyme-adapter-react-16

使用方式：

import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const wrapper = shallow(<MyComponent foo="bar" />);

总结

在使用 Enzyme 测试 React 组件时，我们可能会遇到 “Invalid argument supplied to oneOfType” 报错问题。这通常是因为 propTypes 定义了某些类型检查函数所致。解决方法包括传递上下文环境和使用 enzyme-adapter-react-16。掌握这些技巧，能够让我们更加轻松地测试 React 组件，提升开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6520fbf595b1f8cacd86dd11