Enzyme 测试 React 组件：样例网站

简介

Enzyme 是 Facebook 开发的一个 React 测试工具集，能够帮助我们编写高质量、可维护的 React 组件测试代码。Enzyme 的使用简单、灵活性高、特性齐全，可以让我们在编写 React 组件时轻松地测试组件的渲染、交互、行为等方面的各种情况。

在本文中，我们将介绍如何使用 Enzyme 来测试一个样例网站的 React 组件，并指导读者如何更好地利用 Enzyme 来写出更健壮的测试用例。

环境搭建

开启命令行窗口，执行以下命令来安装 Enzyme 和 React，依赖是 mocha

npm install --save-dev enzyme react react-dom mocha

具体实现

我们来看一个示例, 测试 Card 组件。

// javascriptcn.com 代码示例
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import Card from './Card';

describe('<Card />', () => {
  it('should no throw error', () => {
    expect(() => mount(<Card />)).not.to.throw();
  });

  it('should contain title and description', () => {
    const wrapper = mount(<Card title="Hello" description="World" />);
    expect(wrapper.containsAllMatchingElements([
      <h4>Hello</h4>,
      <p>World</p>
    ])).to.equal(true);
  });

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

这里我们测试了三个方面: 能否正常渲染；title 和 description 传参正确；Button 的 click 事件的监听。

1. 第一个测试中我们发现在这个 Case 只要不抛出错误我们就认为测试通过了。
2. 第二个测试是对于传入参数的评估，我们测试在参数传入的情况下是否渲染正确。
3. 最后一个测试是事件的监听。这里我们使用了另一个工具 sinon.js 来 spyOn 方法并监听 click 的调用次数。

通过这三个测试，便可评估 Card 组件的全部功能。

同时我们要注意 expect 可能涉及到的 sync/async 问题，这时候可以使用 async/await 并用 try/catch 包括 expect。

// javascriptcn.com 代码示例
it('async test', async function() {
  const wrapper = await mount(<Card />)

  try {
     // do something
     expect(wrapper.find('h1').length).to.equal(1)
  } catch (e) {
     // this error will be caught and passed to the test runner
     done(e)
  }
});

总结

在此，我们简单介绍了如何使用 Enzyme 测试 React 组件，希望能够有助于您更好地编写测试代码，提供稳定性和测试覆盖度。同时我们也很期待您在实际项目中的应用，Enzyme 也提供了更多的测试方式供你使用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539d6807d4982a6eb367ef7