Question

我正在进入针对JestJS编写的React纯组件的测试世界。在指南中，我读到它更容易编写纯组件的测试，一旦包裹在复杂的uis中，将产生更少的问题。

让我们假设我有这个组件：

    const Icon = ({
      name,
      size,
      rotate,
      flip,
      spin,
      color,
      className,
      onClick
    }) => (
      <i
        className={[
          "icon",
          color,
          className,
          "font",
          "font-" + name,
          size ? "font-" + size + "px" : null,
          rotate ? "font-rotate-" + rotate : null,
          flip ? "font-flip-" + flip : null,
          spin ? "font-spin" : null
        ].join(" ")}
        onClick={onClick}
      />
    );

    Icon.propTypes = {
      name: PropTypes.oneOf(names).isRequired,
      size: PropTypes.oneOf(sizes),
      rotate: PropTypes.oneOf(rotates),
      flip: PropTypes.oneOf(flips),
      spin: PropTypes.bool,
      className: PropTypes.string,
      color: PropTypes.oneOf(colors),
      onClick: PropTypes.func
    };

    Icon.defaultProps = {
      size: null,
      rotate: null,
      flip: null,
      spin: false,
      className: "",
      color: null,
      onClick: () => {}
    };

names，sizes，rotates，flips和colors是组件类内部的常量。

现在，假设我要编写一个测试（我正在使用酶进行安装），以检查我的组件能否正确呈现。

我写了类似下面的代码：

    import React from "react";
    import { mount } from "enzyme";
    import Icon from "../../components/icon";
    describe("Icon component", () => {
        it("should render an icon", () => {
            const wrap = mount(<Icon name={props.name} />);
            expect(wrap.find(`i.icon.font.font-${props.name}`).exists()).toBe(true);
        });
    });

但这是我的疑问：

是否值得为每个可以传递到我的组件的道具创建测试？
如果是，我应该为每个可接受的道具组合编写一个测试吗？
如果是的话，当我将来添加/删除/更改道具时，该更改是否应该反映在添加/删除/更改指数级测试上？

Answer 1

您可以使用snapshot testing并仅提供几个具有不同道具组合的测试用例。像制作照片以供以后比较之类。

对我来说，孤立地对待每个道具或道具组合都不能保证您100％正确（如果CSS样式只是缺少样式，该怎么办？）也不能快速运行。单元测试应该易于支持和理解，并且不应使构建过程困难。在每次存储库推送上运行的快速冒烟测试比用尽100％覆盖率的测试要好得多，因为它需要1个小时才能通过，因此永远不会触发该测试。

编写React纯组件可维护测试的正确方法

1 个答案: