如何在 Jest 中使用 Enzyme？

介绍

Jest 和 Enzyme 都是前端测试框架，可以帮助我们更高效地编写和运行测试。Jest 是一个测试运行器，Enzyme 则是一个测试工具库，用于方便地测试 React 应用的各个组件。在本篇文章中，我们将深入讨论如何在 Jest 中使用 Enzyme。

准备工作

在使用 Jest 和 Enzyme 进行测试之前，需要先安装它们。我们可以通过以下命令来安装：

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

Enzyme 的基本用法

在开始使用 Enzyme 进行测试之前，我们先来了解一下它的基本用法。

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

it('renders without crashing', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper).toMatchSnapshot();
});

在上面的示例代码中，我们使用了 Enzyme 的 shallow() 方法来浅渲染 MyComponent，然后使用 Jest 的 expect() 方法进行断言。

在 Jest 中配置 Enzyme

为了在 Jest 中使用 Enzyme，我们需要在 setupTests.js 文件中进行配置：

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

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

在上面的代码中，我们导入了 Enzyme 的 Adapter，并将其传递给 configure() 方法。这样，在 Jest 运行测试时，Enzyme 就可以使用 React 16 的 Adapter 了。

常见的 Enzyme 方法

shallow()

shallow() 方法用于浅渲染组件。它只渲染组件本身，而不会渲染其子组件。这使得测试更加集中，同时也让测试更加快速。

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

it('renders without crashing', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper).toMatchSnapshot();
});

mount()

mount() 方法用于完全渲染组件。它将渲染组件及其所有子组件。这使得测试更加细粒度，但也比 shallow() 方法更缓慢。

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper).toMatchSnapshot();
});

find()

find() 方法用于查找匹配选择器的子元素。

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find('.my-class')).toHaveLength(1);
});

simulate()

simulate() 方法用于模拟事件。它接受一个事件名称作为参数，并可选地传递事件对象。

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------

--------- --------- -- -- -
  ----- ------- - ----------
  ----- ------- - ------------------ ----------------- ----
  ---------------------------------------------
  -----------------------------------
---

setState()

setState() 方法用于设置组件的状态。它接受一个状态对象作为参数，并可选地传递回调函数。

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

it('sets state', () => {
  const wrapper = mount(<MyComponent />);
  wrapper.setState({ count: 1 });
  expect(wrapper.state().count).toEqual(1);
});

总结

在本文中，我们详细介绍了如何在 Jest 中使用 Enzyme 进行测试。我们讨论了 Enzyme 的基本用法、在 Jest 中配置 Enzyme，以及常见的 Enzyme 方法。希望通过本文的了解，读者能够更加熟练地使用 Jest 和 Enzyme 进行测试，提升应用程序的质量和稳定性。

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