在前端开发中，我们经常使用 React 来构建网页的用户界面。为了保证代码的质量和稳定性，我们通常会使用测试工具来进行组件的单元测试。Enzyme 是一个常用的 React 测试工具之一，它能够帮助我们方便地对组件进行测试。
当我们测试组件时，很有可能组件中的类名是动态生成的，例如根据用户输入的不同内容来改变组件的样式。这时，我们就需要使用 Enzyme 来测试组件的动态 ClassName。下面，让我们来了解如何做到这一点。
Enzyme 的基本使用
在进行测试前，我们需要安装 Enzyme 和相关的测试库。在本文中，我们将使用 Jest 来进行测试。下面，我们来安装所需的包：
npm install enzyme enzyme-adapter-react-16 react-test-renderer jest-enzyme -D
接着，我们需要在项目中创建一个测试的配置文件。在项目根目录下创建一个 jest.config.js 文件，输入以下内容：
// javascriptcn.com 代码示例
module.exports = {
setupFilesAfterEnv: [
'jest-enzyme',
],
snapshotSerializers: [
'enzyme-to-json/serializer',
],
testEnvironment: 'enzyme',
testEnvironmentOptions: {
enzymeAdapter: 'react16',
},
};这里使用了 Jest 的一些特性，例如 setupFilesAfterEnv 和 snapshotSerializers，同时也指定了 Enzyme 的适配器，这里我们使用的是 react16。
测试动态 ClassName 的方式
一般来说，组件的 ClassName 是根据 props 生成的。因此，我们可以使用 Jest 的 snapshot 功能来测试组件中的 ClassName。在组件的测试用例中，我们可以使用类似如下的代码来测试动态 ClassName：
// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('renders correctly with default props', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});
it('should render ClassName dynamically based on props', () => {
const props = { isDisabled: true };
const wrapper = shallow(<MyComponent {...props} />);
expect(wrapper).toMatchSnapshot();
});
});在这里，我们使用了 Jest 的 toMatchSnapshot 方法来生成我们的快照。快照的生成方式为，将组件渲染为一段字符串，然后将这段字符串和预期的结果保存到一个文件中。之后，每当我们运行测试时，Jest 就会将该组件重新渲染，然后将新的渲染结果与之前的快照进行对比。如果两者不同，测试就会失败。
在上述代码中，我们定义了一个 props 变量，它包含了一个名为 isDisabled 的属性。这个属性将用来为组件动态生成 ClassName。我们可以通过2个例子来展示：
// javascriptcn.com 代码示例
{/* isDisabled为false */}
<div className={`my-component${!!isDisabled ? ' disabled' : ''}`}>
Hello, World!
</div>
{/* isDisabled为true */}
<div className={`my-component disabled`}>
Hello, World!
</div>在上面的代码中，我们使用了一个三元表达式来判断 isDisabled 变量是否为真。如果为真，就会给组件添加一个 disabled 的类名。在测试代码中，我们传入了一个 isDisabled 属性为 true 的 props 对象，然后生成了快照。当我们传入其他不同的 props 时，组件的 ClassName 就会改变。当我们运行 npm test 时，Jest 就会自动生成组件的新快照，并将其与之前的快照进行比较，然后输出测试结果。
总结
在本文中，我们介绍了如何使用 Enzyme 和 Jest 来测试组件的动态 ClassName。我们学习了如何设置测试环境，并使用 Jest 的快照功能来测试组件的 ClassName。这是一个非常基础的测试用例，但希望通过本文的介绍，你已经可以基于此进行更多复杂的测试了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538ef9a7d4982a6eb21c87d