Question

我有一个简单的React组件，看起来如下所示：

export default class New_Component {
   static propTypes = {
        name: PropTypes.string.isRequired,
        mobile: PropTypes.number.isRequired,
        address: PropTypes.string.isRequired
   };
}

render() {
   return(
    <div>
      <h1>{this.props.name}</h1>
      <h6>{this.props.mobile}</h6>
      <p>{this.props.address}</p>
   </div>
 )
}

因此，如果我想使用 Jest 和 Enzyme 为上述组件编写测试用例，那么可以为该组件编写哪些可能的测试用例？有人可以指导我吗？我无法弄清楚可能的测试用例是什么，因为我在这个组件中没有任何函数，因此我可以在 expect（）函数中检查函数的结果。

Answer 1

我相信可以不为该简单组件编写任何单元测试，并将您的短时间集中在地球上，例如编写端到端测试。

如果您的经理正在监控您应用中测试的％覆盖率，则只需测试您的组件呈现name，mobile和address：

const wrapper = shallow(<New_Component
  name="testName"
  mobile="000000"
  address="addressMobile"
/>);

expect(wrapper.find('h1').text()).to.equal('testName');
expect(wrapper.find('h6').text()).to.equal('000000');
expect(wrapper.find('p').text()).to.equal('addressMobile');

Answer 2

由于我刚刚进入React世界，我会给你一个开始的样本。测试可能是一项艰巨的任务。

但是，我同意接受的答案，因为对于这样大小的组件来说这可能是过度的。

这可能是我可能变得更加复杂的起点。

describe("<New_Component/>", () => {
  let actual;

  const complete_props = {
    name: "test",
    mobile: 12345678,
    address: "123 test road"
  };



 describe("given all neccessary props", () => {
    beforeEach(() => {
      actual = shallow(<NewComponent {...complete_props} />);
    });

    it("renders correctly", () => {
      expect(actual).toMatchSnapshot();
    });

    it("should render the component", () => {
      expect(actual.find("NewComponent"));
    });

    it("should render three children", () => {
      expect(actual.children().length).toEqual(3);
    });

    it("should render h1 with correct prop", () => {
      expect(actual.props().children[0]).toEqual(
        <h1>{complete_props.name}</h1>
      );
    });

    it("should render h6 with correct prop", () => {
      expect(actual.props().children[1]).toEqual(
        <h6>{complete_props.mobile}</h6>
      );
    });

    it("should render p with correct prop", () => {
      expect(actual.props().children[2]).toEqual(
        <p>{complete_props.address}</p>
      );
    });
  });
});

将来您应该在寻求帮助之前至少尝试解决方案。如果他们看到你自己做了一些努力，那么这里的社区就更愿意花时间。

如何使用Jest和Enzyme为简单的React组件编写测试用例

2 个答案: