enzyme react 组件测试

enzyme 简单实践

enzyme 主要用于 React 组件测试

文档链接：https://enzymejs.github.io/enzyme/

https://www.npmjs.com/package/enzyme

Jest 断言配置：https://github.com/enzymejs/enzyme-matchers/tree/master/packages/jest-enzyme

环境依赖配置：https://github.com/enzymejs/enzyme-matchers/tree/master/packages/jest-environment-enzyme

官网星星只有 800 颗，证明实际使用的人数不是很多（因为判断组件太严格）国内的组件和功能经常更改，这里不合适。代码两年没有更新了。

简单使用

这个只是测试组件，不包括断言库，可以选择自定义的断言库（React 通常匹配 Jest 断言库）

需要在测试入口配置

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

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

然后编写组件测试文件

import React from 'react';
import { shallow, mount, render } from 'enzyme';

describe('<CollaboratorFormatter />', () => {

  it('basic text', () => {
    function Fixture() {
      return (
        <div>
          <input id="checked" defaultChecked />
          <input id="not" defaultChecked={false} />
        </div>
      );
    }
    const wrapper = mount(<Fixture />);
    expect(wrapper.find('#checked')).toBeChecked();
    expect(wrapper.find('#not')).not.toBeChecked();
  });

  it('basic text', () => {
    function Fixture() {
      return (
        <div>
          <input id="disabled" disabled />
          <input id="not"/>
        </div>
      );
    }
    const wrapper = mount(<Fixture />);
    expect(wrapper.find('#disabled')).toBeDisabled();
    expect(wrapper.find('#not')).not.toBeDisabled();
  });

  it('basic text', () => {
    function EmptyRenderFixture() {
      return null;
    }
    function NonEmptyRenderFixture() {
      return (
        <div>
          <EmptyRenderFixture />
        </div>
      );
    }
    const wrapper = mount(<EmptyRenderFixture />);
    expect(wrapper.find('EmptyRenderFixture')).toBeEmptyRender();

    const wrapper2 = mount(<NonEmptyRenderFixture />);
    expect(wrapper2.find('NonEmptyRenderFixture')).toBeEmptyRender();
  });

});

渲染组件三个方式

shallow rendering：浅渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。

full DOM rendering：完整 DOM 渲染非常适用于您的组件可能与 DOM API 交互或需要测试封装在高阶组件中的组件的用例。

static rendered markup：使用 enzyme 的渲染功能从你的 React 树中生成 HTML，并分析生成的 HTML 结构。

适合不同的组件和交互

https://enzymejs.github.io/enzyme/docs/api/shallow.html

https://enzymejs.github.io/enzyme/docs/api/mount.html

https://enzymejs.github.io/enzyme/docs/api/render.html