Question

我有这个组件：

export const MyComponent= ({ children, style }: Props) => (
  <p className="component-class-name" style={style}>
    {children}
  </p>
);

，并且我正在尝试对其进行测试，因此我认为测试中有两种情况，一种带有孩子，第二种没有。这是我的“带孩子”测试片段：

  it("should render properly with children", () => {
    const children = <span>MyComponent children</span>;
    const wrapper = mount(<MyComponent {...props}>{children}</MyComponent>);
    expect(wrapper.find(".component-class-name").exists()).toBe(true);
    expect(wrapper.find("span")).toHaveLength(1);
  });

但是我认为有更好的方法来测试孩子。可以吗，或者我做错了什么？为了进行测试，我使用了Jest和酶。

Answer 1

    it("should render  MyComponent without children", () => {
    const wrapper = mount(<MyComponent {...props} />);
     expect(wrapper.find(".component-class-name").text()).toBe(""); 
   });

因此，您可以在没有孩子的情况下进行测试。

用Jest和Enzyme进行React Component的子级测试

1 个答案: