解决在使用 Enzyme 测试 React 组件时出现的 ReferenceError: React is not defined 问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Enzyme 测试 React 组件时，出现 ReferenceError: React is not defined 问题是比较常见的。这个问题通常表示在测试文件中没有正确引入 React 库，或者是 Enzyme 的适配器（Adapter）没有与 React 对应。

下面我们来详细介绍这个问题的原因和解决方法。

问题原因

当我们使用 Enzyme 测试 React 组件时，我们需要在测试文件（.js）中引用 React 库和 Enzyme 库。这通常会像下面这样：

import React from 'react';
import { shallow } from 'enzyme';

//测试代码

如果在这个文件中没有正确引入 React 库，那么就会出现 ReferenceError: React is not defined 错误。

类似地，如果我们使用的是 enzyme-adapter-react-XX（如 enzyme-adapter-react-16），而在测试文件中没有正确引用适配器，那么也会出现相同的错误。

解决方法

解决这个问题，我们需要检查测试文件中对 React 库和适配器的引用是否正确，并且确保它们是对应的。

引入 React 库

我们可以使用 import 语句来引入 React 库：

import React from 'react';

这个语句应该在测试文件的顶部，位于其他引用之前。

如果你已经正确引入了 React 库，但是错误依然存在，你可以检查以下几个可能的问题：

检查 React 库是否已经正确安装
检查 import 语句的拼写是否正确

引入 Enzyme 库和适配器

与引入 React 库一样，我们需要使用 import 语句来引入 Enzyme 库和适配器：

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

这个语句也应该在测试文件的顶部，位于其他引用之前。

请注意，在这个例子中，我们使用了 enzyme-adapter-react-16 适配器。如果你使用的是其他版本的 React，你需要相应地更改适配器的名称。

配置适配器

为了让 Enzyme 正确运行，你需要在你的测试文件中配置适配器。这通常在文件的底部完成，如下所示：

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

请注意，在这个例子中，我们使用了 enzyme-adapter-react-16 适配器。如果你使用的是其他版本的 React，你需要相应地更改适配器的名称。

完整示例代码

在下面的示例代码中，我们将演示如何在测试组件时引入 React 库和 Enzyme 库，并配置适配器：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import MyComponent from './MyComponent';  //需要测试的组件

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

describe('MyComponent', () => {
  it('should render correctly', () => {
    const component = shallow(<MyComponent />);
    expect(component).toMatchSnapshot();
  });
});

在这个示例中，我们成功解决了 ReferenceError: React is not defined 错误。

总结

当在使用 Enzyme 测试 React 组件时出现 ReferenceError: React is not defined 错误时，我们应该检查测试文件中对 React 库和适配器的引用是否正确，并确保它们是对应的。我们可以使用 import 语句引入这些库，并配置适配器以使 Enzyme 正确运行。

希望这篇文章能够帮助你解决在使用 Enzyme 测试 React 组件时出现的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b42777d4982a6eb52c15f