Enzyme测试React组件库：第三方组件测试策略-优快云博客

Enzyme测试React组件库：第三方组件测试策略

【免费下载链接】enzyme JavaScript Testing utilities for React 项目地址: https://gitcode.com/gh_mirrors/en/enzyme

在React应用开发中，第三方组件的测试一直是开发者面临的痛点。你是否还在为如何高效测试第三方组件而烦恼？本文将详细介绍使用Enzyme进行第三方组件测试的完整策略，帮助你轻松应对各种测试场景，确保项目质量和稳定性。读完本文，你将掌握Enzyme的安装配置、三种渲染方式的应用、第三方组件测试的实用技巧以及常见问题的解决方案。

Enzyme简介与安装配置

Enzyme是一个用于React的JavaScript测试工具，它让测试React组件的输出变得更加简单。你还可以操作、遍历组件输出，并在一定程度上模拟运行时环境。Enzyme的API旨在模仿jQuery的DOM操作和遍历API，具有直观性和灵活性。

安装步骤

要开始使用Enzyme，你可以通过npm安装它。你需要安装Enzyme以及与你使用的react（或其他UI组件库）版本对应的适配器。例如，如果你将Enzyme与React 16一起使用，可以运行：

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

每个适配器可能有额外的peer依赖项，你也需要安装。例如，enzyme-adapter-react-16对react和react-dom有peer依赖。

目前，Enzyme提供的适配器与以下React版本兼容：

Enzyme Adapter Package	React semver compatibility
`enzyme-adapter-react-16`	`^16.4.0-0`
`enzyme-adapter-react-16.3`	`~16.3.0-0`
`enzyme-adapter-react-16.2`	`~16.2`
`enzyme-adapter-react-16.1`	`~16.0.0-0 \|\| ~16.1`
`enzyme-adapter-react-15`	`^15.5.0`
`enzyme-adapter-react-15.4`	`15.0.0-0 - 15.4.x`
`enzyme-adapter-react-14`	`^0.14.0`
`enzyme-adapter-react-13`	`^0.13.0`

配置适配器

最后，你需要配置Enzyme以使用你想要的适配器。为此，你可以使用顶级的configure(...) API：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

官方文档：docs/installation/README.md

Enzyme三种渲染方式

Enzyme提供了三种主要的渲染方式，分别是浅渲染（Shallow Rendering）、完全DOM渲染（Full DOM Rendering）和静态渲染（Static Rendered Markup），它们各有特点，适用于不同的测试场景。

浅渲染（Shallow Rendering）

浅渲染用于将一个组件渲染成虚拟DOM对象，只渲染当前组件，不渲染其子组件，这样可以确保测试不会受到子组件行为的影响。浅渲染非常适合单元测试，因为它专注于测试单个组件的行为。

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

浅渲染API文档：docs/api/shallow.md

完全DOM渲染（Full DOM Rendering）

完全DOM渲染将组件渲染到一个真实的DOM节点中，这使得测试组件的生命周期方法、DOM交互等更加真实。完全DOM渲染适用于集成测试，因为它可以测试组件之间的交互。

import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

完全DOM渲染API文档：docs/api/mount.md

静态渲染（Static Rendered Markup）

静态渲染将组件渲染为静态的HTML字符串，然后使用Cheerio库解析该字符串并返回一个Cheerio包装器，你可以使用Cheerio的API来遍历和操作这个包装器。静态渲染适用于测试组件的HTML输出。

import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

静态渲染API文档：docs/api/render.md

第三方组件测试实用技巧

选择合适的渲染方式

对于第三方组件的测试，选择合适的渲染方式至关重要。如果第三方组件比较简单，没有复杂的子组件和生命周期方法，浅渲染可能是一个不错的选择，它可以快速测试组件的基本渲染和交互。如果第三方组件有复杂的生命周期方法或DOM交互，完全DOM渲染可能更适合。如果只需要测试组件的HTML输出，静态渲染就足够了。

模拟第三方组件的属性和方法

在测试使用第三方组件的组件时，你可能需要模拟第三方组件的属性和方法，以隔离测试并确保测试的准确性。你可以使用sinon等工具来模拟这些属性和方法。

例如，如果你有一个组件使用了第三方组件ThirdPartyComponent，并且该组件有一个onClick方法，你可以使用sinon来模拟这个方法：

import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import MyComponent from './MyComponent';
import ThirdPartyComponent from 'third-party-component';

describe('<MyComponent />', () => {
  it('calls the onClick method of ThirdPartyComponent when clicked', () => {
    const thirdPartyOnClick = sinon.spy();
    const wrapper = shallow(
      <MyComponent>
        <ThirdPartyComponent onClick={thirdPartyOnClick} />
      </MyComponent>
    );
    wrapper.find(ThirdPartyComponent).simulate('click');
    expect(thirdPartyOnClick).to.have.property('callCount', 1);
  });
});

测试第三方组件的事件处理

第三方组件可能会触发各种事件，你需要测试你的组件是否正确处理了这些事件。你可以使用Enzyme的simulate方法来模拟事件触发，并使用sinon等工具来验证事件处理函数是否被正确调用。

例如，测试第三方组件的onChange事件：

import React from 'react';
import { mount } from 'enzyme';
import sinon from 'sinon';
import MyComponent from './MyComponent';
import ThirdPartyInput from 'third-party-input';

describe('<MyComponent />', () => {
  it('updates the state when ThirdPartyInput changes', () => {
    const wrapper = mount(<MyComponent />);
    const thirdPartyInput = wrapper.find(ThirdPartyInput);
    const testValue = 'test input';
    thirdPartyInput.simulate('change', { target: { value: testValue } });
    expect(wrapper.state().inputValue).to.equal(testValue);
  });
});

常见问题与解决方案

React Hooks支持问题

Enzyme支持React Hooks，但在.shallow()中由于React浅渲染器的上游问题存在一些限制：

useEffect()和useLayoutEffect()在React浅渲染器中不会被调用。相关问题
useCallback()在React浅渲染器中不会记忆回调函数。相关问题

`ReactTestUtils.act()`包装

如果你使用React 16.8+和.mount()，Enzyme会包装包括.simulate()、.setProps()、.setContext()、.invoke()在内的API，并使用ReactTestUtils.act()，因此你不需要手动包装。

一个常见的使用.act()触发处理函数并断言的模式是：

const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);

由于在Enzyme内部使用.act()包装.prop()（或.props()）的结果会破坏返回值的相等性，因此我们无法在内部进行包装。但是，你可以使用.invoke()来简化代码：

const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);

适配器兼容性问题

不同版本的React需要使用对应的Enzyme适配器，如果适配器版本与React版本不兼容，可能会导致测试失败。因此，在安装Enzyme和适配器时，一定要确保它们的版本与你的React版本兼容。你可以参考前面的适配器兼容性表格来选择合适的适配器版本。

如果你遇到适配器相关的错误，可以尝试更新Enzyme和适配器到最新版本，或者降级到与你的React版本兼容的版本。

官方常见问题文档：docs/common-issues.md

总结与展望

本文详细介绍了Enzyme测试React第三方组件的策略，包括Enzyme的安装配置、三种渲染方式的应用、第三方组件测试的实用技巧以及常见问题的解决方案。通过合理使用Enzyme，你可以高效地测试第三方组件，确保你的React应用的质量和稳定性。

未来，Enzyme将继续发展以支持React的新特性和改进。你可以关注Enzyme Future了解Enzyme的未来发展计划。

希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。如果你觉得本文有用，请点赞、收藏并关注我们，以获取更多关于React测试的优质内容。下期我们将介绍Enzyme与其他测试工具的集成，敬请期待！

社区教程：README.md

【免费下载链接】enzyme JavaScript Testing utilities for React 项目地址: https://gitcode.com/gh_mirrors/en/enzyme

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Enzyme测试React组件库：第三方组件测试策略