Enzyme 测试 React 应用的最好实践

React 是当前最流行的前端类库之一，在开发 React 应用时，测试是非常重要的一环。而 Enzyme 是 React 官方推荐的测试工具之一。Enzyme 是由 Airbnb 开源的 React 测试工具。它的主要作用是辅助 React 组件的测试，提高测试的质量和效率。

Enzyme 的基本介绍

Enzyme 是 Airbnb 推出的测试工具，提供了一系列用于测试 React 组件的 API。Enzyme 的主要功能包括渲染 React 组件、对组件进行交互、断言组件的输出和状态，以及模拟和测试事件等。

它提供了以下三种渲染方法：

• shallow()：只渲染当前组件，并没有渲染子组件, 用于单元测试。
• mount()：渲染出来所有的子组件，用于集成测试。
• render()：基于 Cheerio 将 React 渲染成一个静态的 HTML 或者 XML，用于快照测试。

Enzyme 支持的断言库有： chai, expect 和 jest 等。

Enzyme 工具的安装

安装 Enzyme 和相应的断言库：

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

我们还需要安装适配器以使 Enzyme 能够与 React 一起工作：

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

在应用程序中，我们需要通过configure()方法配置 Enzyme：

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

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

Enzyme 测试实践

测试 React 组件渲染

在这里，我们在不对其进行深层次渲染的情况下“浅渲染”组件，并获取其 HTML:

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

对组件进行交互测试

接下来，我们演示如何使用 Enzyme 在 React 组件上触发事件。下面演示 React 中的单击事件。

describe("Button", () => {
  it("on clicking the button should show the alert message" , () => {
    const wrapper = shallow( <Button/> );
    const button = wrapper.find('button');
    button.simulate('click');
    expect(wrapper.state().open).to.equal(true);
  })
})

测试 props 的正确性

接下来，我们演示如何使用 Enzyme 测试 React 组件的 props 是否正确。

describe('PersonalInfo', () => {
  it('renders the correct firstName in <h1> tag', () => {
    const wrapper = shallow(<PersonalInfo firstName="John" />);
    expect(wrapper.find('h1').text()).to.equal('John');
  });
});

快照测试

快照测试旨在防止意外更改。它会比较组件的先前渲染版本和新的渲染版本，以检测差异。如果发现差异，它将抛出错误。

describe('Snapshot', () => {
  it('renders correctly', () => {
    const component = renderer.create(<Button />);
    const tree = component.toJSON();
    expect(tree).to.matchSnapshot();
  });
});

总结

Enzyme 是 React 测试的重要工具之一，可以帮助我们进行 React 组件的测试，并最大程度地提高测试的质量和效率。上述内容是 Enzyme 测试 React 应用的最好实践的简述，包含了测试组件渲染、props 的正确性测试、快照测试、对组件进行交互测试等方面。通过学习 Enzyme，我们可以更好地进行 React 技术的深度应用。

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