如何在 Enzyme 中测试 React 组件中的样式-JavaScript中文网-JavaScript教程资源分享门户

React 组件的样式是组件中一个很重要的部分，但是在测试组件时，我们很难判断组件的样式是否正确。为了解决这个问题，我们可以使用 Enzyme 来测试 React 组件中的样式。Enzyme 是一个由 Airbnb 开发的 React 测试工具，它提供了一系列 API 来方便我们测试 React 组件。

本文将介绍如何在 Enzyme 中测试 React 组件中的样式。

安装 Enzyme

首先，我们需要安装 Enzyme。在终端中输入以下命令：

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

这个命令会安装 Enzyme 和适配器，适配器是用来将 Enzyme 和 React 一起使用的。

配置 Enzyme

接下来，我们需要在项目中配置 Enzyme。在项目的根目录下创建一个 setupTests.js 文件，然后在这个文件中添加以下代码：

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

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

这个文件会在每次运行测试时自动被调用，确保 Enzyme 能够正常工作。

测试样式

现在，我们已经准备好测试样式了。让我们假设我们有一个组件叫做 Button，它有一个 className 属性，用来设置按钮的样式。我们想要测试这个组件的样式是否正确。

首先，我们需要渲染这个组件。在测试文件中，添加以下代码：

import { shallow } from 'enzyme';
import Button from './Button';

it('renders correctly', () => {
  const wrapper = shallow(<Button className="primary" />);
  expect(wrapper).toMatchSnapshot();
});

这个测试用例会渲染 Button 组件，并将 className 属性设置为 "primary"。然后，它会使用 toMatchSnapshot 方法来检查组件的快照是否正确。如果组件的样式有任何变化，这个测试用例会失败。

接下来，我们可以使用 toHaveClassName 方法来检查组件的样式是否正确。在测试文件中，添加以下代码：

it('has the correct class name', () => {
  const wrapper = shallow(<Button className="primary" />);
  expect(wrapper.find('.primary')).toHaveClassName('button-primary');
});

这个测试用例会检查组件中是否有一个 className 为 "primary" 的元素，并且这个元素是否有一个名为 "button-primary" 的类名。

结论

在本文中，我们学习了如何使用 Enzyme 来测试 React 组件中的样式。我们安装了 Enzyme，并配置了它，然后编写了测试用例来检查组件的样式是否正确。这些测试用例可以确保我们的组件在样式方面的表现是正确的。

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